How to Make Image Intense Titles Appear on Hover | BeSuperfly

How to Make Image Intense Titles Appear on Hover

by

Image Intense title on hover

Have your Image Intense title show only on hover!

This tutorial will show you how to easily add CSS to your site where you can have the Title hide until hover.

step 1: Native behavior and CSS for Image Intense “Titles”.

 

I recently received a Facebook message from an Image Intense user. She (Brandy) had a very good question:  “I just need to know how to hide the H2 overlay title until hover, just like the description [Caption]. I’m having trouble finding that in the CSS.”

Let’s explore this a bit by first taking a look at how Titles in Image Intense work by default.  Here’s an example using the “Berlin” hover effect.  You can see that the Title text is always visible, even when you hover over it. Go ahead and experiment with moving your mouse over it or by long pressing (mobile/touch device).

Berlin Germany

Food, fun, culture!

The default CSS for all <h2> in Image Intense looks like what you see below. Notice that there are no opacity or hover state declarations.

 

.n10s-block h2, .n10s-block figure p {
    margin: 0px;
}

.n10s-block h2 {
    word-spacing: -0.15em;
    font-weight: 300 !important;
	color: #fff;
}
.n10s-block h2 span {
    font-weight: 800 !important;
}

step 2: Native behavior and CSS for Image Intense “Captions”.

 

To contrast that, you can see on the Image Intense module above that the Caption text appears only on hover, with a transition for going from

opacity: 0;

to

opacity: 1;

Most hover styles in Image Intense are like this. Here’s is what the typical CSS looks like. The transition declarations mean that a change for the opacity and transform settings between normal state and hover will take 0.35 seconds to happen. We include the “-webkit-” vendor prefix declaration to maximize compatibility between browsers (although, this is becoming less important as modern browsers are now used by nearly everyone).

.n10s-berlin p {
	padding: 20px 2.5em !important;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	-ms-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}
.n10s-berlin:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

step 3: Adding CSS for Title on hover only.

 

Now that we understand how the CSS is working, we can come up with some that will make the Title text show only on hover:

.n10s-berlin h2 {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.n10s-berlin:hover h2 {
    opacity: 1;
}

You can put this into the Custom CSS area of the Page Builder settings (the hamburger menu at the very top of the Divi Builder in the back end) so that it will load only on the appropriate page. Or you can put it in Theme Options or in your child theme’s stylesheet.

final step: Make it work with your selected hover style

To make this CSS work with whatever hover style you have selected, you will need to use your browser’s “Inspect…” tool to find the right class name to go with the <h2>. Here’s an example of what this will look like. The highlighted line is where you will find the class name specific to your hover type:

Image Intense Hover Title Class Name

And below is an example of the CSS applied to an Image Intense module. For this example, we are using the same image and text, but using the Kiev hover effect. You’ll see the title on this one appear only on hover.

Berlin Germany

Food, fun, culture.
A great place to visit!

Let me know in the comments if this is clear enough or if you have any questions. Thanks for reading! 🙂

 

Further reading:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *