Animated gif hover code for squarespace

[shirdavid]

What I need to change in this code in order to make animated gif working on hover?
how I can control each image?….

#projectThumbs .project {
position: relative;
}
#projectThumbs .project .project-title {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
text-align: left;
opacity: 0;
-o-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#projectThumbs .project .project-title:hover {
opacity: 1;
-o-transition: opacity 0.1s ease-in;
-ms-transition: opacity 0.1s ease-in;
-moz-transition: opacity 0.1s ease-in;
-webkit-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;
}
#projectThumbs .project .project-title:before {
content:”;
display:inline-block;
vertical-align:down;
height:90%;
}

[Paulie_D]

We’d need to see your HTML & CSS (and the image) in a Codepen.io example.

For instance, there is no image in that CSS so we have no idea what is going on.

Also this

#projectThumbs .project .project-title:before {
content:”;    /* should be content:""; */
display:inline-block;
vertical-align:down; /* no such value as 'down' */
height:90%;
}

[shirdavid]

Hey, Thanks!
I don’t have access to the html of the template…
this css is the only thing I put in order to get the thumbnail title to appear on hover.

and this is also the only way that I can change stuff in squarspace…

do you think that there is a code that I can try and see if it can help me?

[Paulie_D]

Is the image inline (in the HTML) or is it supposed to be a background image?

[shirdavid]

mmm…

I’m not sure about it. I can just tell you that whatever code it will be I will need to connect it to 2 URL’s- one background and one gif animation…

[Paulie_D]

Sorry…you really aren’t helping yourself here.

Will the gif be in the background?

If the gig is the background, what element will have this background.

If the gif is not the background, what element will the image be in.

[Author]

Posts