This is the heart of Image Intense, and the foundation on which it was originally built.  Because we believe in a global, open internet community we went with names that reflect just a few of the major cities around the world.

There are 33 different hover style effects.  Each named for a city and with its own set of strengths and weaknesses when it comes to how well it works with different configurations of text, buttons, backgrounds, etc.  If you want to use a particular one but it’s not working quite right for you, you can easily customize the CSS for it within your child stylesheet or in Theme Options. You can see examples of all of them right here. Learn more about styling Image Intense with this tutorial.

Image Intense 5 introduced some brand new tilt styles! Just hover the image and it will tilt based on the user’s mouse position. There are 7 different styles that range from simple tilt effects to multi-layer effects.

To enable the tilt features, just select Tilt in the hover styles. A second drop down will become available to select from the 7 styles.

Overlay and border tilts effects are available for some of the options. Styles for both can be controlled under Design-> Overlay.

Some tilt effects use overflow. Visual builder isn’t capable of showing the overflow effects. They will show up on the front end though. Cape Cod especially uses this overflow, and in many cases, it’s recommended to add some extra padding to give it some space.

With various effects, there might be a border around the text, under the text, or various other positions. These borders are controlled under the Overlay toggle in the Design tab. Using the Border toggle will only control a border around the entire module.

These are the two parts of the overlay title (header) texts. Normally they are best with just one or two words.  Both title parts have their own separate font options available in the design tab.

We know, we know! You want to move the text around. Yes, we also know you don’t want to use CSS to do it! It’s been a long time coming, but we’ve taken care of it for you now. Look under the Design tab and you’ll see alignment settings for both the text and caption. Horizontal and Vertical options are available for both. If you want to get extra specific, just select custom and go wild! It should be noted that due to the nature of some effects, positioning conflicts may arise. Example: Using Title Top aligned will result in the title going into overflow. You can remedy this by using custom vertical alignment instead.

This one is pretty simple.  Think of opacity as how “see through” something is.

Image Opacity determines how “transparent” the image is when you are not hovering.  The lower the opacity, the more that any background color or background image will show through.

The same applies to Image Opacity on Hover.  This setting applies to the same image when you mouse over (“hover”) or long press (touch screens) on the module.

An example of this is at the very top of this page.  We have an image specified in the “Image URL” setting in the “General Settings” tab, then we specify a Background Image in the “Advanced Design Settings” tab.  In that tab, we also set the “Image Opacity” to 1.0 and the “Image Opacity on Hover” to 0.  That way, when we are looking at the image it shows up completely. However, when we hover over (mouse) or long press (touchscreen) the module, the main image disappears completely and the background image shows up.  That’s what we might call a “reveal on hover”.

This is the one setting for buttons that goes beyond the default Divi Button settings. It replaces the “Button Placement (Left/Right)” option you normally see in the Button Module settings.  This setting for Image Intense is in a weird place (as you’ll see below – sorry, there was nothing we could do about that), but we think you’ll find it a worthwhile compromise.

We sectioned off the Image Intense module into a 3×3 grid for button position.  That means you have 9 different places you can put your button, from top left to bottom right.  Note that “center” is horizontal (left to right) and “middle” is vertical (top to bottom).

To see how “Button Position” works, you’ll see several different Image Intense modules on this page that show different button positions.

This setting is in the “Advanced Design Settings” tab. Obviously, you must set “Include a Button” on the “General Settings” tab to “Yes” in order for this option to appear. This is where you’ll find it: