1

Is it possible in CSS to change img src when div element is hovered?

<a class="template-image" href="/template-1978944/editor">
 <div class="green"></div>
 <div class="red"></div>
 <div class="orange"></div>
 <img src="/1978944/cover_small.jpg">
</a>

I tried

a.template-image[href^="/template-1978944"] div.green:hover ~ img {
 content: url(/1978943/cover_small.jpg);"
}

a.template-image[href^="/template-1978944"] div.red:hover ~ img {
 content: url(/1978942/cover_small.jpg);"
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Pavel Boroda Ignatenko
  • 23
  • 4
  • change 'content' to 'background' and use a transparent image for the image itself – Shanimal Feb 28 '18 at 21:12
  • Possible duplicate of [Changing image on hover with CSS/HTML](https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) – Anonymous Feb 28 '18 at 21:13

3 Answers3

4

You can try some workaround by using url of background-image:

.orange {
  height:50px;
  background:orange;
}
.img {
  width:400px;
  height:200px;
}
.orange:hover + .img {
  background-image:url(https://lorempixel.com/400/300/)!important;
}
<div class="orange">Hover me!</div>
<div class="img" style="background-image:url(https://lorempixel.com/400/200/)"></div>

You can also create the illusion of changing the srcby using pseudo-element with no need of markup change (you simply need to adjust the CSS used to correctly position the new image depending on your code) 

.container > div {
  display: inline-block;
  height: 50px;
  width: 50px;
}

.container {
  position: relative;
}

.orange {
  background: orange;
}

.red {
  background: red;
}

.green {
  background: green;
}

.orange:hover~img,
.red:hover~img,
.green:hover~img {
  visibility: hidden;
}

.orange:hover::after {
  content: url(https://lorempixel.com/400/200/);
  position: absolute;
  top: 50px;
  left: 0;
}

.red:hover::after {
  content: url(https://lorempixel.com/400/220/);
  position: absolute;
  top: 50px;
  left: 0;
}

.green:hover::after {
  content: url(https://lorempixel.com/400/300/);
  position: absolute;
  top: 50px;
  left: 0;
}
<div class="container">
  <div class="green"></div>
  <div class="red"></div>
  <div class="orange"></div>
  <br>
  <img src="https://lorempixel.com/400/200/">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

It is not possible to change an image src attribute on hover an an element using only CSS.

However, it is possible to change the background-image property of an element on hover of another element in CSS. If you're willing to use a <div> element with a background instead of an <img> element, this will give you the same effect.

This can be done with the general sibling combinator (~), as is seen in the following:

.image {
  height: 100px;
  width: 100px;
  background-image: url('http://via.placeholder.com/100');
}

.green:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/00ff00');
}

.red:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/ff0000');
}

.orange:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/ffa500');
}
<a class="template-image" href="/template-1978944/editor">
  <div class="green">Green</div>
  <div class="red">Red</div>
  <div class="orange">Orange</div>
  <div class="image"></div>
</a>

If you cannot update the HTML, you'll be forced to rely on a JavaScript solution. This can be done by first selecting the image with getElementsByTagName(), and then adding a function that updates the .src of the image during the .onmouseover of the other elements.

This can be seen in the following:

let image = document.getElementsByTagName('img')[0];

document.getElementsByClassName('green')[0].onmouseover = function() {
  image.src = 'http://via.placeholder.com/100/00ff00';
};

document.getElementsByClassName('red')[0].onmouseover = function() {
  image.src = 'http://via.placeholder.com/100/ff0000';
};

document.getElementsByClassName('orange')[0].onmouseover = function() {
  image.src = 'http://via.placeholder.com/100/ffa500';
};
<a class="template-image" href="/template-1978944/editor">
  <div class="green">Green</div>
  <div class="red">Red</div>
  <div class="orange">Orange</div>
  <img src="http://via.placeholder.com/100">
</a>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
1

You almost have it. Change 'content' to 'background' and use a transparent image for the image src

a.template-image[href^="/template-1978944"] div.green:hover ~ img {
 content: url(http://lorempixel.com/100/100/sports/);"
}

a.template-image[href^="/template-1978944"] div.orange:hover ~ img {
 content: url(http://lorempixel.com/100/100/cats/);"
}

a.template-image[href^="/template-1978944"] div.red:hover ~ img {
 content: url(http://lorempixel.com/100/100/nature/);"
}
<a class="template-image" href="/template-1978944/editor">
 <div class="green">GREEN</div>
 <div class="red">RED</div>
 <div class="orange">ORANGE</div>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
</a>

UPDATE: if you need the original image, use it image as the default background.

Shanimal
  • 11,517
  • 7
  • 63
  • 76
  • @PavelBorodaIgnatenko but in this case you are modifying the initial src ... i thought you are not able to change it ? and you need to rely on CSS for that ? ... because if you are able to change src, then why not simply use a div instead of img ? – Temani Afif Feb 28 '18 at 21:32
  • @Temani Afif, many thanks to you too. I will combine bothe code. Yours and this. – Pavel Boroda Ignatenko Feb 28 '18 at 21:49
  • @PavelBorodaIgnatenko there is no issue :) this is also good solution .. but i thought you are not able to touch the HTML and change the image src ;) because if you can you can have more simple solution – Temani Afif Feb 28 '18 at 21:54