I have an animated gif that is static upon page load, but then starts animating on mouse over.
It works great, but I want to take it one step further and have the gif animate when I hover over the entire div,
The attached image shows which div holds the animated gif, and I want the gif to start animating once the mouse hovers over it.
Link to page with the animated gif: https://vitocreative.com/subscription
thanks in advance
By the whole div, do you mean where it also says Strategy Meetings? Do you have your code to where you want this to happen?
Yes the whole div, including the heading text and the paragraph text. I currently have the code set on the GIF only using CSS, but I would like to find out how I can make the gif animate when the user mouses over the entire div.
Right. Try going to where you have the code for the whole div, and setting the hover on that instead. Where you have the code set on the GIF only, move that over to where the code is for your whole div. Makes sense?
You can do it like this.
.container.column-1:hover img.static{
opacity:0;
}
Trouble is, I am using a CSS image swap to produce the effect. I think I need an alternative solution if I want the gif to animate when the mouse hovers over the div and not the image.
that did it! thank you!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.