Image replacement method. Your help is needed.

[css_fan5]

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…

[Paulie_D]

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

[css_fan5]

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.

[Paulie_D]

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/

[css_fan5]

This looks really neat, I will try this now.

[Author]

Posts