Jump to content

7.1 Gallery caption hover + mobile question

Recommended Posts

Site URL: http://www.celineisogai.com


password: wowza

I've been searching around for a solution for a hover effect on my gallery (simple:grid) but the CSS I've tried didn't work. I was hoping to have the images in greyscale when static and when hovered over become the regular colour with the caption in the middle. When I tried one of the other codes it changed the padding between the grid pictures and then pictures were touching. My second question to this would be can I have it so that in mobile they don't have the greyscale or hover effect? I just want the picture. 

Last question would be what is the code to have my pictures in 1 column on mobile? When I click on the "work" page there's 2 columns and inside the projects it's also 2 columns. 


Thank you!

Link to comment

@celineisogai, add this to your custom CSS


@media(max-width:767px) {
.gallery-grid-item img {
    filter: none;

.gallery-grid-wrapper {
    grid-template-columns: 1fr !important;

Working Demo: 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.