Image to text overlay with CTA on hover

Image to text overlay with CTA on hover. In this video we’re going to show you how to build an image to text overlay with a CTA button on hover. For our example today we are using the fantastic Divi theme. If you would like to take it for a test drive you can do so from my affiliate link here.

To get started we are going to enable the visual builder, this will let us build an image to text overlay with a CTA button on hover on the front end of the site. Once the builder is enabled and loaded, we are going to go down to where we want to work, and add a row with three columns.

We can now add a new module by clicking on the little black icon. For the demonstration today we are going to select the call to action module. This will allow us to add a button that will link to a product, of course you can link it to wherever you wish.

Once the module has been added let’s go ahead and customize it. I am going to erase the title as it is not needed for this today. Put in any content that you want in the content area, then move on down to the button and add the link to wherever it is you would like to go button to link to.  Today we are using Divi’s fantastic dynamic content option to select a product from our woocommerce products.

Now we can move on to adding the background image. For this we are actually going to add it to the column of the row, and not the actual module itself. So, let’s go back into the row settings, the green tab, go down to background and select the image option from the tabs at the top. Select the desired image and click on the save button at the bottom. We now have an image on the column that is behind our CTA module, but of course you cannot see it at the moment as the module, by default, has a blue background.

The next step is to go back into the module by clicking on the black tab. Once inside let’s go down to background. Once inside the background tab, we will need to hover over the text that says background to reveal some editing icons, once they appear, click on the arrow icon, this will bring up two extra tabs, one that says desktop and one that says hover. Now we need to decide what we want module to do when the mouse is hovering over it. With this example, when the mouse is not hovering over it, we need the background to be transparent. To do this click on the desktop tab, select the color that you desire for the background, then when the color is in place, move the right hand slider all the way down, this slider controls that opacity, or transparency if you like, of the background color. When it is all the way down at the bottom, the background color will be totally transparent. Now this is complete, we need to click on the hover tab, add the required background color, making sure that the opacity/transparency slider is high enough up to enable the text to be seen clearly.