Hover animation

Hey there, I've had a CSS code for hover animation in my 7.0. After moving it to 7.1 the code is no longer working

At the bottom of every page like https://www.justinphang.com/nike-hk, there's a gallery that users can navigate to the next page.

Here's the previous code, can it still work with modifications?

// Hover animation in Thumbnail Gallery block //
a img.thumb-image {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
   -webkit-transition-property: transform;
           transition-property: transform;
 }
 a img.thumb-image:hover,
 a img.thumb-image:active {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
 }
[id*='index-section']:hover img {
    transform: scale(1.1);
    transition: all .3s ease;
}

This is great! Anyway to make this work for all pages?

I use this gallery block as a form of index page at the bottom of every page, for example here: https://www.justinphang.com/wr-supreme-cell and here https://www.justinphang.com/google-mana

And you're correct, I just want to make it bigger. But out of curiousity, if its enlarge + overlay, what kind of CSS will it be?

#1. Use this code

.slide:hover img {
    transform: scale(1.1);
    transition: all .3s ease;
}
img {
    transition: all 0.3s ease;
}

#2. Use this

.slide:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover:after {
    opacity: 1;
    transition: all 0.5s;
}

Thank you Tuanphan as always! Though after applying this code I realized all the other gallery blocks are affected. Seems like targetting manually on the gallery block in each of the page is the way around it (like your first solution), do you have any other suggestions?

To apply code to one page, just edit page > Add a Code Block > Paste the code

<style>
  .slide:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover:after {
    opacity: 1;
    transition: all 0.5s;
}
</style>

(CSS in Code Block, need to wrap in <style> and </style>)

Thanks Tuanphan, couldn’t solve the issue with this method too as gallery block of the same page got affected. I’ll stick to individual block targeting. Appreciate it!

If target specific block, use this code instead, but add to Custom CSS box

#enter-gallery-block-id {
 .slide:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover:after {
    opacity: 1;
    transition: all 0.5s;
}
}

Use this free tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Got it, thanks!