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: 

(for larger image: Right Click>Open Image in New Tab)

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, desktop design only 

More Help Articles


Community Resources: 

More video resources from our incredible community of designers and Showit users.
Viva la Violet 

Did this answer your question?