Forums

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

Home Forums CSS Confusion with the hover method

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #38413
    mcranston18
    Member

    Hi there. I’m hoping for a bit of help using the “hover” method in CSS.

    My HTML is as follows:

    ‚Äč

    What I would like to do is on hover, overlay that image with a new image. Let’s say (hypothetically) with this image: http://teamcoding.ca/leisure/wp-content/uploads/2012/05/ViewEventImage1.jpeg .

    I’m not sure how to do this though.

    Is it better practice for to have a

    in my HTML, then in my CSS add a background-image, and then add another line for div to hover? i.e. :

    HTML:


    CSS:

    #thisismyImage {
    background-image:currentimage.jpg;
    }
    #thisismyImage:hover {
    background-image:newImage.jpg;
    }
    #104099
    Taufik Nurrohman
    Participant

    Try this: http://jsfiddle.net/tovic/NTXmL/16/




    .image img + img {display:none;}
    .image:hover img + img {display:block;}
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.