Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Style Your Gallery Images on Hover

Would you like to add some styling to your gallery when your visitors hover on your images? This tutorial will walk you through how to add a little CSS to your gallery images on hover using box-shadow.

To add the CSS, you can install, activate, and use the CSS Addon. You can find more detailed step-by-step instructions for our CSS Addon here. Once activated, you can add this CSS to the Misc tab under the Gallery Custom CSS or using your child theme’s style.css:

#envira-gallery-wrap-336463 .envira-gallery-item img:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    transition: box-shadow 0.3s ease-in-out;
    cursor: pointer;
}

You’ll need to change the #envira-gallery-wrap-336463 to match the gallery ID number of your gallery when using the above CSS.

To find your gallery ID number, just edit the gallery and look in the sidebar, the number you see in the shortcode is the gallery ID number.

Add your box shadow CSS to the Misc tab of the gallery

Have a look below to see how the CSS has changed our gallery images on hover.


Would you like to add some other styling to your gallery? Have a look at our tutorial on How to Customize the Lightbox Close Button.