Hover Action on Images

Create a hover effect which lowers an images opacity to display an overlay

Jeff Willems avatar
Written by Jeff Willems
Updated over a week ago

Here's how to create a mouseover effect on an image to reveal a color/text overlay, like this:

The first step is making sure your image is added to the canvas, sized, and located how you wish it to be. Next, we are going to toggle that image off the desktop view using the monitor toggle icon (to the left of the layer) associated with the element layer as shown here:

Once you've hidden your image away, add a shape to create your color overlay and the text you wish to appear over the image. You will need to make sure your image is on top of the color and text elements you've added, you can see how to do that here.

Now that we've got our color and text elements added click that monitor toggle icon again to turn the image back on for the desktop design.

Lastly we need to add a hover action to the image that is now covering the elements below so that it lowers in opacity to reveal the content beneath when moused over. Click to select the image and go to the hover tab in the right sidebar. Set a custom action type and then you can play with the opacity settings to get your desired effect. 

That's it, you can preview and test your new mouseover effect now!

Note: Mouseover functionality does not apply to mobile design, only to desktop design.

Did this answer your question?