CODEWITHSUNDEEP
htmlcss
Pavel Boroda Ignatenko
Pavel Boroda Ignatenko

Reputation: 23

Is it possible to change img src by hover on another element by CSS

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);"
}

Upvotes: 1

Views: 3248

Answers (3)

Shanimal
Shanimal

Reputation: 11718

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.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272589

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>

Upvotes: 4

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Upvotes: 1

Related Questions