Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Style Image Title and Caption Hover Effects

Share This Post!

Have you ever wanted to have your image captions appear over your images on hover? Or maybe your image titles? Envira Gallery is highly customizable using CSS. Using the Envira’s CSS Addon, we’ll show you how to use CSS to style your image titles or image captions over the image with pure CSS.

This doc only points to galleries. Currently, you can’t use this CSS for Albums due to the way the album code is output on the page.
  1. Requirements
  2. Style Image Title Hover Effects
  3. Style Image Caption Hover Effects

To style your image captions or titles, there are a couple of things that are required.

The first requirement is that use a column count for your gallery. If you edit your gallery and go to the Config Tab, make sure you have a column count selected in your Number of Gallery Columns dropdown.

Set your number of gallery columns to a number and not Automatic

The next requirement, in order for this to work, is to choose either show your caption or your title over the image. On the Config Tab, select either the Title or Caption.

Choose if you'd like to show either your title or caption

The last thing you’ll need to do is install and activate Envira’s CSS Addon. Navigate to the Addons section and click Install and then Activate on the CSS Addon.

Install and activate the CSS addon

The following are examples to help you get started; you may need to modify them to suit your specific needs. Note in the CSS that we are preceding all CSS with the gallery ID #.
You’ll need to change this ID # to match your gallery ID. You can find this by looking in the sidebar of your gallery edit screen.
This is your gallery ID number

All CSS used below can be added to your gallery by editing the gallery and clicking on the Misc Tab. There you’ll see a box labeled Custom Gallery CSS. Copy and paste any of the CSS below there and don’t forget to save your changed by clicking Update on the gallery.

Add your custom CSS to the Misc Tab of the gallery on the box called Custom Gallery CSS

Style Image Title Hover Effects

Under the example CSS below, you’ll see the gallery in action. This example will show the title over the image on hover.

#envira-gallery-wrap-277329 .envira-gallery-item-inner { background-color: #000 !important; }
  
#envira-gallery-wrap-277329  a.envira-gallery-link {
display: block;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
  
#envira-gallery-wrap-277329 .envira-gallery-item-inner.envira-gallery-item-inner.envira-gallery-item-inner.envira-gallery-item-inner.envira-gallery-item-inner:hover img.envira-gallery-image.envira-gallery-image.envira-gallery-image.envira-gallery-image.envira-gallery-image.envira-gallery-image { opacity: 0.5 !important; }
  
#envira-gallery-wrap-277329 .envira-gallery-item-inner .envira-title {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #fff;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
  
#envira-gallery-wrap-277329 .envira-gallery-item-inner:hover .envira-title { opacity: 1; }


Style Image Caption Hover Effects

Under the example CSS below, you’ll see the gallery in action. This example will show the caption over the image on hover.

#envira-gallery-wrap-277355 .envira-gallery-item-inner { background-color: #000 !important; }

#envira-gallery-wrap-277355 .envira-gallery-wrap a.envira-gallery-link {
display: block;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}

#envira-gallery-wrap-277355 .envira-gallery-item-inner:hover img, #envira-gallery-wrap-277355 a.envira-gallery-link:hover, #envira-gallery-wrap-277355 img.envira-gallery-image:hover {
    opacity: .5 !important;
} 
 
#envira-gallery-wrap-277355 .envira-gallery-item-inner .envira-caption {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
 
/* Optional: add transitions so the caption smoothly fades in/out on hover */
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
 
#envira-gallery-wrap-277355 .envira-gallery-item-inner:hover .envira-caption { opacity: 1; color: #fff; }

Looking for more ways to customize the appearance of your galleries? Check out all of our Styling docs for more inspiration!

Share This Post!