Create Beautiful Responsive Photo & Video Galleries For Your Site in Minutes

Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

Image Hover Effects For WordPress

How to Add Image Hover Effects for WordPress

Written By: author avatar Waseem Abbas
author avatar Waseem Abbas
    

Would you like to style gallery images on hover? With Envira and a little CSS this can be easily done. This tutorial will help you with the CSS you need to style your gallery images on hover.

This tutorial is a little more technical then the other docs and will require a basic level of CSS.


First you’ll need to either create a new gallery or edit an existing gallery. If you need any help creating your first gallery, please review our documentation here.

The next step you’ll need to install and activate Envira’s CSS Addon. Navigate to the Addons section and click Install then Activate on the CSS Addon.

Install and activate the CSS addon

Below is the CSS we’ve used in our demo.

You’ll need to change this ID number to match your gallery ID number. You can find this by looking in the sidebar of your gallery edit screen.

For more information on how to find your gallery ID number you can read this article.

You can also just add this CSS to the WordPress Customizer to make this change for all of your Envira Galleries!

To find out more about the WordPress Customizer, please review our article on How to add custom CSS to the WordPress Customizer.

Add your box shadow CSS to the Misc tab of the gallery to style gallery images on hover

#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;
}

If you’ve got Envira Lazy Load enabled on the Configuration Tab of the gallery, the CSS you’d use is this:

#envira-gallery-wrap-336463 .envira-gallery-item .envira-lazy:hover { 
box-shadow: 0 10px 15px rgba(0,0,0,0.3); 
transition: box-shadow 0.3s ease-in-out; 
cursor: pointer; 
}
Be sure to update the -336463 with your own gallery ID number

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

If you’re going to want this change for all galleries, just remove the gallery ID number from the CSS and add your CSS to the Appearance » Customize » Additional CSS and click Publish to save the changes.

See the demo!

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.


Q: How can I target albums?

A: Absolutely! You’d use exactly the same CSS but just be sure the ID matches the album. If you added your CSS to the WordPress Customizer then it would automatically make this change for all Envira gallery and album images.

author avatar
Waseem Abbas

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Envira Gallery is funded, why it matters, and how you can support us.

author avatar
Waseem Abbas

The Best Drag and Drop WordPress Gallery Plugin

Envira Gallery: Create, Showcase, and Sell Your Work – Trusted by 150k+ Sites.

Enter the URL of your WordPress website to install

Please enable JavaScript in your browser to complete this form.

Upgrade to Envira Gallery Pro

Unlock even more powerful features designed to make your galleries even more beaituful.

Video Galleries

eCommerce

Social media Sharing

Adobe Lightroom

And much more!

Popular on Envira Gallery Right Now!

How to Create a Beautiful Masonry Image Gallery in WordPress

How to Create a Beautiful Masonry Image Gallery in WordPress

Facebook14TweetLinkedInPin1 Are you looking to showcase your photography or image…
Polished and Protected: How to Watermark WordPress Images

Polished and Protected: How to Watermark WordPress Images

Facebook20TweetLinkedInPin Are you wondering how to add a watermark to…

Comments

  1. This does not work. I do not have the image opacity in config. I purchased the plus theme. I loaded the addons.

  2. Same issue here. Just bought the pro version, and added the Gallery Themes addon. Seems to have everything else I’m looking for, but don’t see the opacity option.

    The gallery I’m testing it on was originally created in the Lite version, so not sure if that could be the issue.

    1. Hey John 🙂 I’m so sorry for the confusion! Actually the plugin has changed quite a bit and I’ve now updated this article to reflect the new way (using CSS). If you need anything else, please just let me know!

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.


Copyright © [#this year :%Y] Envira Gallery, LLC. Envira Gallery is a trademark of Envira Gallery, LLC.