CSS to add overlay effects

Hello,

Thanks for contacting us with your question! For the overlays, you can follow the directions outlined here to add the hover effects:
https://enviragallery.com/docs/style-image-title-hover-effects/

If you want to have the ability to add the CSS to each gallery individually, you’ll have to purchase the pro plugin. However, you should be able to achieve the same effect using your preferred custom CSS box.

Let me know if that works for you!

Hi Kevin,

The CSS in the docs works, but it requires gallery ID which is not very practical for me as I have a lot of galleries. However, I managed to get the desired overlay affect that automatically applies to all gallery using this CSS:

.envira-gallery-item-inner a { display: block; border-bottom: 0 none; transition: background 0.3s ease-out !important; }
.envira-gallery-item-inner a:hover { background: #012558  !important;   }
.envira-gallery-item-inner a:hover:after { position: absolute; content:'+'; color: #ffffff; font-size: 42px; top: 30%; left: 0; right: 0; width: auto; margin: 0 auto; text-align: center;  }
.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img { transition: opacity 0.3s ease-out !important; }
.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item .envira-gallery-item-inner:hover img { opacity: 0.5 !important;  }

Anyway thanks for the tip, Kevin!