Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Show Lightbox Navigation Arrows on Hover

Would you like to show the lightbox navigation arrows for your Envira Lightbox only on hover? With Envira there is much more you can do with just a little CSS. This documentation will show you the custom CSS you’ll need to show the lightbox navigation arrows only on hover!


Your first step is to create a new gallery or edit an existing one. You can follow along with our documentation for creating your first gallery.

Next, we’ll be setting up the Lightbox tab settings.

Enable the gallery arrows to show your lightbox navigation arrows on hover

First, Choose the Gallery Lightbox Theme you’ll want to use.

The Base (Dark) and Base (Light) themes won’t give you the option to Enable Gallery Arrows?, the gallery arrows for those two themes will always show.

However for all other lightbox themes, you’ll need to Enable Gallery Arrows? selected as shown in the screenshot above.

Next 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 to easily add your transparency CSS change to the gallery's Misc tab

Now we’ll need to add our CSS. Navigate to the Misc tab of the gallery. This is where we’ll be adding the CSS.

Enter CSS to show navigation arrows on hover

You’ll need to change this ID # to match your gallery ID. Under the Custom Gallery CSS box, look for the sentence starting All custom CSS for this gallery should start with. It will give you the ID number in grey.

Alternatively, you can apply this change to all galleries if you wish by adding the CSS to your WordPress dashboard » Appearance » Customize » Additional CSS and tweak the CSS slightly by removing the div[data-envirabox-id="431230"] from the CSS below. Then just click Publish to save the changes.

Enter CSS for all galleries to show navigation arrows on hover

The last step is to work out what you want the CSS to be.

To hide the lightbox navigation arrows until you hover, use the CSS below.

div[data-envirabox-id="431230"] .envirabox-inner .envirabox-navigation { 
    opacity: 0 !important; 
} 
div[data-envirabox-id="431230"] .envirabox-inner:hover .envirabox-navigation { 
    opacity: 1 !important; 
}

All you need to remember is to update the -431230 to match your gallery ID.

And that’s it! Check out the demo below to see this in action.

Would you like to have some more fun with Envira and CSS? Why not check out our tutorial on How to Change Lightbox Overlay Transparency!

Check out our demo of this in action!


A: If you’ve set up your lightbox for the Gallery Arrow Position to be Inside, use this CSS:

div[data-envirabox-id="431230"] .envirabox-inner .envirabox-navigation-inside { 
    opacity: 0 !important; 
} 
div[data-envirabox-id="431230"] .envirabox-inner:hover .envirabox-navigation-inside { 
    opacity: 1 !important; 
}