Jump to content

Css images hover effect

Recommended Posts

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

 

my-image.jpeg

Link to comment
  • Replies 1
  • Views 301
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.