hover effect for multiple images on a single page – HELP!

[kathleeeeen]

I am still having issues with hover effects on the site I am editing:
-site url removed by author-
As you can see, the first image changes opacity when hovered over, I cannot figure out how to apply this same effect to the rest of the images though…not sure why. I am using the same HTML div tags and it’s not working. Any suggestions?

Here is the CSS I am using:
#hoverfx img {opacity:1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;}
#hoverfx img:hover{opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;}

HTML is:
< div id = "hoverfx" >
image
< / div >

Thank you!

[TheDoc]

Only one of the images is inside of the hoverfx div. The div is being closed right away:

[kathleeeeen]

Thanks for the quick response…I thought that was the issue at first as well, but even when I don’t close the div until the very end, the hover effect is still only applying itself to the first image.

[TheDoc]

You have errors all over the place, including stuff like this: lazyload-src=” width=” which could be causing errors with all sorts of renderings.

[Author]

Posts