Jump to content

Hover zoom code not working

Recommended Posts

I have added this code into the css for zoom image on hover and it has worked on a previous site but not this one. Am I missing something?

 

.gallery-grid-item:hover img {
    transform: scale(1.2);
    transition: all 0.5s ease;
    overflow:hidden!important;
}

.gallery-grid-item{
  overflow:hidden!important;
}

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

@camhick706 it looks like maybe at some point you switched the gallery layout from grid to masonry? That'll be why your code isn't working anymore, it was only targeting grid layout. Try replacing "grid" with "masonry" in your code. You also don't need the overflow property in the img selector, and I think the transition property belongs on the primary element before the hover action, so like this:

.gallery-masonry-item img {
	transition: all 0.5s ease;
}
.gallery-masonry-item:hover img {
	transform: scale(1.2);
}
.gallery-masonry-item {
	overflow: hidden !important;
}

let me know?

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.