Css images hover effect

Hello all.

I am quite new in squerspace.

I am trying to my gallery to add my css hover effect.

I tried the following code:

CSS

'

/** 
One CSS file hover effect verson 1.0 
This is the CSS file use for creating the image hover effect and also for caption effect **/

img {
max-width: 100%;
}
.anim-img-box {
max-height: 350px;
max-width: 550px;
overflow: hidden;
margin: 2px 2px;
position: relative;
}
.anim-img-box img {
     opacity: 1;
    -webkit-transition:.5s ;
    -moz-transition: .5s ;
    -o-transition: .5s ;
    -ms-transition: .5s ;
    transition: 0.5s;
}

/**Background Colors **/
.bg-white:hover {
background-color:#FFF;
}
.bg-blue {
background-color: #00008B;
}
.bg-blue1 {
background-color: #473C8B;
}
.bg-blue2 {
background-color: #4A708B;
}
.bg-black {
background-color: #000;
}
.bg-red {
background-color: #C43A46;
}
.bg-red1 {
background-color: #8B0000;
}
.bg-red2 {
background-color: #CD0000;
}
.bg-seagreen {
background-color: #2E8B57;
}
.bg-seagreen1 {
background-color: #43CD80;
}
.bg-seagreen2 {
background-color: #008B45;
}
.bg-darkred {
background-color: #8B0000;
}
.bg-indianred {
background-color: #CD5C5C;
}
.bg-indigo {
background-color: #4B0082;
}
.bg-indigo2 {
background-color: #218868;
}
.bg-violet {
background-color: #8A2BE2;
}
.bg-fuchsia {
background-color: #FF00FF;
}
.bg-orchid {
background-color: #DA70D6;
}
.bg-orchid1 {
background-color: #7A378B;
}
.bg-orchid2 {
background-color: #8B4789;
}
.bg-orchid3 {
background-color: #DA70D6;
}
.bg-magenta {
background-color: #FF00FF;
}
.bg-magenta1 {
background-color: #CD00CD;
}
.bg-magenta2 {
background-color: #8B008B;
}
.bg-maroon {
background-color: #B03060;
}
.bg-maroon1 {
background-color: #8B008B;
}
.bg-maroon2 {
background-color: #8B1C62;
}
.bg-green {
background-color: #31955B;
}
.bg-palegreen {
background-color: #7CCD7C;
}
.bg-palegreen1 {
background-color: #548B54;
}
.bg-aquamarine {
background-color: #458B74;
}
.bg-palevioletred {
background-color: #DB7093;
}
.bg-palevioletred2 {
background-color: #CD6889;
}
.bg-palevioletred3 {
background-color: #8B475D;
}
.bg-purple {
background-color: #8B475D;
}
.bg-purple1 {
background-color: #A020F0;
}
.bg-purple2 {
background-color:#551A8B;
}

/**Animation box hover **/

'

I have chosen the following effect.

"<div class="container">
  <div class="anim-img-box bg-green">
<div class="img-zoom-in"><img src="https://static1.squarespace.com/static/635edfbf8999410437298ba3/t/6373ce8e8a15716bef9696f7/1668533903120/dionysus.jpg" /></div>
<div class="anim-caption cap-from-top">
<h2 class="bg-red">Button larger to smaller</h2>
<div class="anim-link3">
<a class="hvr-green" href="#">Read</a>
</div>
</div>
</div>"

and I received an image that is not 100% height, and you can see the overlay like the attached image.

Could you help me?

See you

Marina

Can you share link to page where you use image? We can check easier