+91 8105841156 harshith.webdev@gmail.com
Select Page

#Overlays are basically an image or texture that is added as an

additional layer to your photograph. 

    Amazing and easy to use Image overlays for any image built with Blurb modules in Divi.

In this post i am going to show you how to add beautiful overlays to your images using blurb modules in Divi, these overlays add an extra elegance to your website , when visitors hover an image it acts as a trigger which will provide information about the image.

I have two different types of overlays with each having two variations here, which you can just copy the code and use it on your website. I also have given additional information on how to customize them to your needs.    

1. skewed right with title and text on hover

    This effect hides the title and text until the users hover on it, it gives a feeling of mystery which will make visitors take action and reveal what its about, it is great for showing info about the image.
If you want to take a look at how it feels checkout the demo, after that follow my instructions below, then copy the code and add it to the page where you want to apply these effects.

#Instructions for customization with code.

     Before you add the code to your website there are a few things that need to be setup using blurb modules, I will show you how to add this effect on a 3 column layout , but you can follow the same steps for 2 column layout as well, just the number of blurbs used will reduce.

#Step 1 

     Insert a new 3 column row , add a single blurb to the first column then change the title and the content you want to show on the image when users hover on it. You can customize the color , change the font and font-size how you want but don’t do it now, do it after you add my code below.

Then remove the default image and a add background image of your choice, remember a background image not image and icons, its the option before Admin label. 

You can link the module to a landing page or a post or anything in the link option as well, since the entire module is an image, anywhere they click on will take you to what you want them to see.

After this go to the design tab, then go to sizing and set the min-height to 240px, this will not affect your content, it will only keep the module rectangular.

 #Step 2 

Now go to the advanced tab and add   “overlay1” to the class area , this is important to connect the code below to your blurb module.

Once that is done, paste the code below to the page where you are using this effect, this is better than adding to the additional CSS tab as you are using it only on this page, if you add it to the additional CSS tab it will unnecessarily load it on every page even though you are not using it, this might slow your site speed. 

#Step 3

Go back to the designs> title text  here you can customize your title however you like, but in the above image these are the styles i have used, if you want the same you can add them to your blurb.

Title Font => Teko, Sans serif.
Title font weight => bold.
Title font style => TT (uppercase).
Title text alignment => right-align.
Title text color => #fff (white).
Title text size => 36px.
Title letter spacing => 1px.
Title line height => 1em.

Next is Body text, again you can change these as you need but here are my styles:

Title Font => Source sans pro, Sans serif.
Title font weight => bold.
Title font style => TT (uppercase).
Title text alignment => right-align.
Title text color => #fff (white).
Title text size => 16px.
Title letter spacing => 1px.
Title line height => 1.7em.

Final Step 

You have only one blurb module with this effect , you can just copy the module and paste it into to the other columns  depending on how many columns you are using then just change the background image of those modules with different images you want.

I suggest using rectangular images of the proper sizes, mostly thumbnail images of 310x240 size, you can use any image , they will be scaled down to fit, but bigger images will reduce page speed.

2. Title and tagline on hover

A simple tagline and a caption, hides the image, focuses on the text and title on hover.

If you want to take a look at how it feels checkout the demo, after that follow my instructions below, then copy the code and add it to the page where you want to apply these effects.

 Follow the Same steps as above, till step 2, In step 2 add “overlay2” to the class tab then paste the code below to your page.

 #Step 3 

similar to the third step above, go back to design> title text you can change these styles as you wish, and these arr my styles i have used, if you want the same you can add them to your blurb.

Title Font => Source sans pro, Sans serif.
Title font weight => bold.
Title font style => TT (uppercase).
Title text alignment => center.
Title text color => #fff (white).
Title text size => 36px.
Title letter spacing => 1px.
Title line height => 1em.

Next is Body text, again you can change these as you need but here are my styles:

Title Font => Source sans pro, Sans serif.
Title font weight => bold.
Title font style => TT (uppercase).
Title text alignment => center.
Title text color => #fff (white).
Title text size => 16px.
Title letter spacing => 1px.
Title line height => 1.7em.

Final Step 

You have only one blurb module with this effect , you can just copy the module and paste it into to the other columns  depending on how many columns you are using then just change the background of those modules with different images you want.

I suggest using rectangular images of the proper sizes, mostly thumbnail images of 310x240 size, you can use any image , they will be scaled down to fit, but bigger images will reduce page speed.

#3  Close in with title on hover

This is a cool camera shutter like effect with title display on hover.

If you want to take a look at how it feels checkout the demo, after that follow my instructions below, then copy the code and add it to the page where you want to apply these effects.

Similar till step 2 where you add “overlay3” to the class in the advanced tab of the blurb. after that add the code below to your page .

 #Step 3 

similar to the third step above, go back to design> title text you can change these styles as you need.

Title Font => Source sans pro, Sans serif.
Title font weight => bold.
Title font style => TT (uppercase).
Title text alignment => center.
Title text color => #fff (white).
Title text size => 24px.
Title letter spacing => 0px.
Title line height => 1em.

There is no body text for this one.

Final Step 

You have only one blurb module with this effect , you can just copy the module and paste it into to the other columns  depending on how many columns you are using then just change the background of those modules with different images you want.

I suggest using rectangular images of the proper sizes, mostly thumbnail images of 310x240 size, you can use any image , they will be scaled down to fit, but bigger images will reduce page speed.

Final thoughts

 These effects are fully responsive and do not change your module, if you liked them and plan on using them , feel free to contact me on Facebook i will solve any problems you face and also like my page if you want more of these freebie designs.

 

0 Comments

Submit a Comment

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

Connect with ME!

 Want an awesome-looking 
 professional website ?

HIRE ME  and I will build a responsive , SEO  friendly website with an amazing design.

 

 

Social Share Buttons and Icons powered by Ultimatelysocial