Forums

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

Home Forums CSS Image replacement method. Your help is needed.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #193426
    css_fan5
    Participant

    Hello everyone,

    I have an four links that contain an image. I want to replace the image when I hover over the link but I want to do it in a most efficient way possible. Please see my html below:

    `<ul class=”large-block-grid-4″>
    <li><a><img src=”images/IMAGE1.png” alt=”new”></a></li>
    <li><a><img src=”images/IMAGE2.png” alt=”new”></a></li>
    <li><a><img src=”images/IMAGE3.png” alt=”new”></a></li>
    <li><a><img src=”images/IMAGE4.png” alt=”new”></a></li>
    </ul>

    `

    Btw, I am using the Foundation 5 framework.

    What would you recommend that I should do?

    Thanks…

    #193428
    Paulie_D
    Moderator

    That’s not what is generally referred to by “Image Replacement” when we generally talk about it.

    What you are actually asking for is Image Swapping.

    If the images are actual content (i.e. in the HTML) then CSS cannot change them…that’s the area of Javascript.

    If, as I suspect these images are more for actual styling then they should be background images in which case CSS can help.

    Same Question on SO

    #193429
    css_fan5
    Participant

    Hi,

    These are two png files I want to swap on hover. First one is the picture of a product and when I hover it I want to show another picture with “Click here for more info” banner on it.

    #193431
    Paulie_D
    Moderator

    Then JS is the answer I suggest although you probably don’t actually need to swap out the image when you could do something like this

    http://codepen.io/Paulie-D/pen/MYpxWz/

    #193433
    css_fan5
    Participant

    This looks really neat, I will try this now.

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