Get The Plugin
Account Login

Divi Hacks Plugin

Examples & Documentation

Blurb Effects

Blurb effects are animations that apply when you hover over the image. On mobile devices, the animations will apply when the image is tapped.

Blurb effect classes

  • blurb-effect-1
  • blurb-effect-2
  • blurb-effect-3
  • blurb-effect-4
  • blurb-effect-5
  • blurb-effect-6
  • blurb-effect-7
  • blurb-effect-8
  • blurb-effect-9
  • blurb-effect-10
  • blurb-effect-11
  • blurb-effect-12

Additional classes

  • hide-title

adding this class will hide the title completely. This is great for using blurb modules to show images with captions.

  • show-title

adding this class allows you to see the title at all times – before you hover, and while you hover.
This will show the blurb-effect-1 animation and the title will always be visible.

Usage

Add any of the classes to Blurb Module Settings > Advanced tab > CSS ID & Classes > CSS Class

Design

Image
Blurb Module Settings > Content Tab > Image & Icon > Image

Overlay Color (or Gradient)
Blurb Module Settings > Content Tab > Background

Examples

blurb-effect-1

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-1 show-title

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-1 hide-title

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-1

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-2

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-3

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-4

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-5

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-6

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-7

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-8

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-9

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-10

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blurb-effect-11

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

How to set background color of blurb-effect-11:

Make sure the background is set to transparent.

Use the following CSS variable in the Blurb Element Settings > Advanced Tab > Custom CSS > Main Element:

--blurb-background: blue;
blurb-effect-12

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.