Change an image using only CSS.

Question

I have something like

<a href="OnlyThisONE"
 <img class="SameClassForAllIMG" src="random.png"> 
</a>

I would like to replace the image which something else using only CSS. Is this possible?

Here is the Javascript solution.

var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
    if (images[i].src == "random.png")
        images[i].src = 'new.png';
}

Here is a possible CSS solution

.SameClassForAllIMG {
  background: url(new.png) no-repeat;
}

The issue is the CSS should do it for the IMG only under the "OnlyThisONE" href, and not all of them. Is this possible using only CSS?

IMO, What you do with CSS is hiding one image and displaying another one instead. — Hashem Qolami, Jan 27 '14 at 17:01
It wouldn't be random though, unless you used a preprocessor — Zach Saucier, Jan 27 '14 at 17:01
As combination of the possible answers http://jsfiddle.net/DZRzL/1/ — DaniP, Jan 27 '14 at 17:09
@Sten changing the background is not the same as changing the 'src' attribute. You can use the CSS 'content' property. I've added an example below. — dev7, Jan 27 '14 at 17:13
in CSS you cannot change the source, so the background or a pseudo-element looks like being the right options for a CSS ONLY solution. — G-Cyrillus, Jan 27 '14 at 17:29

AfromanJ · Accepted Answer · 2014-01-27T17:07:50.480

2

This is possible using only CSS. You can target the image using a[href='OnlyThisONE'] and hide the <img> tag within, then apply a background to the <a> link.

CSS

a[href='OnlyThisONE'] img {
    display: none;
}
a[href='OnlyThisONE'] {
    background: url('somebackground.jpg');
    width: 100px;
    height: 100px;
    display: block;
}

edited Jan 27 '14 at 17:07

answered Jan 27 '14 at 17:01

AfromanJ

3,922
3
17
33

score 0 · Answer 2 · edited May 23 '17 at 12:28

There are a few approaches you could use. In my opinion, the best one is #1, as it has the broadest browser support and it avoids the use of JS.

1 - You could select just that a (assuming the href is unique), show a background image, and then hide the contained image. You'll also need to specify width, height, anddisplayon thea`:

a[href$='OnlyThisONE'] img {
    display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
    background: url(someOtherImage.jpg) /* show another image as a background */
    display: inline-block;
    height: 100px;
    width: 100px;
}

2 - Use content:url(), but it doesn't have broad browser support - Is it possible to set the equivalent of a src attribute of an img tag in CSS? After running a quick self-check on support of content:url() I would not suggest doing this, at all. I could only get it to work in Chrome. Try it yourself: http://jsfiddle.net/3BRN7/49/

a[href$='OnlyThisONE'] img {
    content:url("newImage.jpg");
}

3 - Use JavaScript as you have in your question.

@Danko Wrong. You can have width/height if you set `display:inline-block`. Also, if you specifically check support of `content:url()` you'll find it's not very good, at all. — matthewpavkov, Jan 27 '14 at 17:19
Create a test page yourself and try it. It doesn't work for me in Firefox or in IE. If I'm missing something here, please fill me in. — matthewpavkov, Jan 27 '14 at 17:32
My mistake my friend seems like only works for a few instances but not in this case deleteing my comments and I see you add the correct for the first option +1 — DaniP, Jan 27 '14 at 17:39

GeckoTang · Answer 3 · 2014-01-27T17:26:54.410

If the src is "random.png", "new.png" will be displayed.

HTML

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
 <span></span>
</a>

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
 <span></span>
</a>

CSS

img.SameClassForAllIMG[src*="random.png"] {
    display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
    display: inline-block;
    width: 300px;
    height: 100px;
    background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}

I guess that this code is the same as your JavaScript solution.

IE7>= version http://jsfiddle.net/nxvm7/1/
IE8>= version http://jsfiddle.net/nxvm7/2/

score 0 · Answer 4 · answered Jan 27 '14 at 17:20

In CSS you could use either pseudo-element on <a> or a background-image in <a> or even in <img> that can only be seen on hover.

here is 2 demo

one using a pseudo-element
one using the img tag with a background. (no src changed).

http://codepen.io/anon/pen/Jchjw

<p>Set background-image, and resize it to zero with padding on :hover 
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1"> 
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>

img {
  vertical-align:middle;
}
[href="#nature"]:hover .a-img {
  height:0;
  width:0;
  padding:40px 60px;
  background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  overflow:hidden;
}
[href="#nature3"]:after {
  content:url(http://lorempixel.com/120/80/nature/4);
  vertical-align:top;
  position:absolute;
}
[href="#nature3"]:hover:after {
  left:0;
}

The a:hover + img background works with oldest IE an it keeps the alt attribute useful, this would be my choice. pseudo-element :after/:before works from IE8, but not the ::*after/::*before syntaxe.

theres in css of course, many other solution working with a or img with or without a translucide gif/png :( ....

Change an image using only CSS.

4 Answers4