There are a number of great plugins that allow you to create some very elegant image overlays and hover effects. Two very popular Divi plugins include Image Intense by BeSuperfly and Divi Overlays by DiviLife.

On a recent project, the hover overlay requirement was pretty basic and we needed a solution that did not require the use of a plugin as this would be used in other websites as well.

So based on a demo I found on the ever-resourceful w3schools.com website, I was able to utilize the Divi Code Module to create 6 very easy to implement, image overlay styles.

In this tutorial I will show you how we use a little custom HTML and CSS to create a super simple image overlay.

View The Live Demo

Let’s Get Started Setting up the Divi Code Modules.

 

Adding The Code Modules

1. Create a row and give it 2 columns (or however many you want).

 

2. Add a Divi Code Module to the first column.

 

3. In the Advanced Tab: assign the module the following CSS Class: gq_overlay_text

 

4. In the Content Tab: add the following HTML.

 

<div class="custom_overlay">
 <img src="https://montereydev.com/demos/divi/easy-image-overlays/wp-content/uploads/sites/12/2017/10/600x450-018.jpg" alt="Image" class="image">
	 <a href="https://quiroz.co/">
		 <div class="overlay">
			<div class="text">Explore The Wonder</div>
		 </div>
	 </a>
</div>

 

5. Now go to your media library and select the image you want to use. When you click on the image, it will open up a screen with the image url. Copy that url.

 

6. Going back to your code module, you can update the following pieces with your own image url, link url, and text in the following locations:

Highlighted in Yellow: Your Image URL from the media library

Highlighted in Green: Your Link URL

Highlighted in Blue: Your Text Displayed on Hover

 

7. Save your page and move on to the magic of adding a little CSS.

 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*---------[ GQ CUSTOM IMAGE OVERLAYS ]-----------*/
/*------------------------------------------------*/

	 /* FADE IN TEXT */
		.gq_overlay_text .custom_overlay {
			position: relative;}
		.gq_overlay_text .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_text .overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
			transition: .5s ease;
			background-color: #3e8adb;}
		.gq_overlay_text .custom_overlay:hover .overlay {
			opacity: 1;}
		.gq_overlay_text .text {
			color: #fff;
			font-size: 22px;
			line-height: 22px;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			width: 100%;}

 

 

Making Adjustments

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

To change the overlay background color, you can do so here:

 

To change the text color and font size, you can do so here:

 

Everything else pretty much stays the same and should not be modified.

 

Six Overlays to Choose From

In this tutorial we have 6 different overlay styles to choose from. For the first example we used the Fade-In-Text technique. If you want to use one of the other techniques, just change the CSS Class in the Advanced Tab of the Code Module.

I have written the CSS so that you can use all 6 techniques in a single project with the code conflicting. Below are the CSS Class names and the entire CSS elements for all 6 of them.

Fade in text: gq_overlay_text

Fade in button: gq_overlay_button

Slide in from the top: gq_overlay_slide_top

Slide in from the bottom: gq_overlay_slide_bottom

Slide in from the right: gq_overlay_slide_right

Slide in from the left: gq_overlay_slide_left

 

/*------------------------------------------------*/
/*---------[ GQ CUSTOM IMAGE OVERLAYS ]-----------*/
/*------------------------------------------------*/

	 /* FADE IN TEXT */
		.gq_overlay_text .custom_overlay {
			position: relative;}
		.gq_overlay_text .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_text .overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
			transition: .5s ease;
			background-color: #3e8adb;}
		.gq_overlay_text .custom_overlay:hover .overlay {
			opacity: 1;}
		.gq_overlay_text .text {
			color: #fff;
			font-size: 22px;
			line-height: 22px;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			width: 100%;}
			
	/* FADE IN BUTTON */
		.gq_overlay_button .custom_overlay {
			position: relative;}
		.gq_overlay_button .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_button .overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
			transition: .5s ease;
			background-color: rgba(2, 2, 2, 0.7);}
		.gq_overlay_button .custom_overlay:hover .overlay {
			opacity: 1;}
		.gq_overlay_button .text {
			color: #fff;
			background: #3e8adb;
			padding: 10px 5px;
			font-size: 15px;
			line-height: 16px;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);}

	 /* SLIDE IN TOP */
		.gq_overlay_slide_top .custom_overlay {
			position: relative;}
		.gq_overlay_slide_top .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_slide_top .overlay {
			position: absolute;
			bottom: 100%;
			left: 0;
			right: 0;
			background-color: #008CBA;
			overflow: hidden;
			width: 100%;
			height:0;
			transition: .5s ease;}
		.gq_overlay_slide_top .custom_overlay:hover .overlay {
			bottom: 0;
			height: 100%;}
		.gq_overlay_slide_top .text {
			color: #fff;
			font-size: 22px;
			line-height: 22px;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);}

	 /* SLIDE IN BOTTOM */
		.gq_overlay_slide_bottom .custom_overlay {
			position: relative;}
		.gq_overlay_slide_bottom .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_slide_bottom .overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #008CBA;
			overflow: hidden;
			width: 100%;
			height: 0;
			transition: .5s ease;}
		.gq_overlay_slide_bottom .custom_overlay:hover .overlay {
			height: 100%;}
		.gq_overlay_slide_bottom .text {
			color: #fff;
			font-size: 22px;
			line-height: 22px;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);}

	 /* SLIDE IN RIGHT */
		.gq_overlay_slide_right .custom_overlay {
			position: relative;}
		.gq_overlay_slide_right .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_slide_right .overlay {
			position: absolute;
			bottom: 0;
			left: 100%;
			right: 0;
			background-color: #008CBA;
			overflow: hidden;
			width: 0;
			height: 100%;
			transition: .5s ease;}
		.gq_overlay_slide_right .custom_overlay:hover .overlay {
			width: 100%;
			left: 0;}
		.gq_overlay_slide_right .text {
			white-space: nowrap; 
			color: white;
			font-size: 20px;
			position: absolute;
			overflow: hidden;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);}

 	/* SLIDE IN LEFT */	
		.gq_overlay_slide_left .custom_overlay {
			position: relative;}
		.gq_overlay_slide_left .image {
			display: block;
			width: 100%;
			height: auto;}
		.gq_overlay_slide_left .overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #008CBA;
			overflow: hidden;
			width: 0;
			height: 100%;
			transition: .5s ease;}
		.gq_overlay_slide_left .custom_overlay:hover .overlay {
			width: 100%;}
		.gq_overlay_slide_left .text {
			white-space: nowrap; 
			color: white;
			font-size: 20px;
			position: absolute;
			overflow: hidden;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);}

 

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest