Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to use Black & White Filter for Envira Gallery Images

Would you like to style your gallery images to appear black and white until you hover? This tutorial can help you with the CSS you need to apply a black and white filter and color on hover.

  1. Create or edit your gallery
  2. Install and activate the CSS Addon
  3. The CSS

Your first step is to either create a new gallery or edit any gallery. On the Config tab, make sure you are using a column gallery for your layout.

The next step you’ll need to do is 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

The following are examples to help you get started; you may need to modify them to suite 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.

Get the gallery ID number to target styling your images

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.

Style your gallery images for the black and white filter by adding your CSS to the Custom CSS box on the Misc tab

The last step is to work out what you want the CSS to be. In this example we’ve styled the tags list to be centered above the gallery and display the tag links as buttons with a hover and active state.

#envira-gallery-wrap-368044 img {
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
}

#envira-gallery-wrap-368044 img:hover {
    filter: grayscale(0);
}

If you wanted to just dull the image down until you hover, you could use this CSS.

#envira-gallery-wrap-368044 img {
    opacity: .5;
    transition: all 0.3s ease-in-out;
}

#envira-gallery-wrap-368044 img:hover {
    opacity: 1;
}

And that’s it! You can see in the gallery below, using specific styles we’ve successfully styled our images to be black and white in the gallery until you hover over them to see the full color. Would you like to have some more fun with Envira and CSS? Why not check out our tutorial on How to Style Pagination Links!

Opacity filter until hover