Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36951
    kathleeeeen
    Member

    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!

    #98008
    TheDoc
    Moderator

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


    click to download catalog
    #98011
    kathleeeeen
    Member

    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.

    #98013
    TheDoc
    Moderator

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.