Fix overlay elements in grid mode

You can fix all your overlay elements like image captions/gallery titles and icons in grid mode instead of the hover effect in both gallery and folder with the help of CSS override.


Follow these steps to fix the overlay elements:

  • Copy the entire CSS override mentioned below.
<style>
#group .grid .grid-item .image-overlay{ opacity: 1;}
#group .grid .grid-item .image-overlay .link-title {bottom: 1em;} 

#photo-gallery .grid .grid-item .image-overlay{ opacity: 1;}
</style>

  • After copying the relevant code, go to Settings (1).
  • In the External Scripts (2), paste the code in the <body> section (3).
  • Hit the Save (4) button to save the changes in the studio.

Now, refresh the site to review the changes on the live site.

 

Can't find what you're looking for?

Get in touch with a Pixpa Expert.