CSS on hover different elments change background img

Question

i have 4 different icons and based on which icon i hover i want to change the background image in a div. The html is like so

  <div class="col side">
    <i id="icon1"></i>
    <i id="icon2"></i>
    <i id="icon3"></i>
    <i id="icon4"></i>
  </div>
  <div class="col">
    <img src="img1" id="img1" class="content" alt="" />
    <img src="img2" id="img2" class="content" alt="" />
    <img src="img3" id="img3" class="content" alt="" />
    <img src="img4" id="img4" class="content" alt="" />
  </div>

So when i hover icon1 i want to display img1 and so on. I know how to do it with jquery/javascript but is it possible with pure css?

are you ok to change structure? if its ok then it can be achive. — Prakash Rajotiya, Feb 04 '21 at 12:04
Where do you want to display the image exactly? In general, you could use the IDs of the icons and do something like `#icon1:hover {background: url("path/to/img1");}` — JKD, Feb 04 '21 at 12:05
ah yeah, i think that would make it very messy, il stick to jq i think haha, was just wondering if it was possible — Adam Baser, Feb 04 '21 at 12:11

score 0 · Answer 1 · answered Feb 04 '21 at 12:07

0

it is not possible but try with adding background image on hover to each icon

#icon1:hover
 {
  background: url("path to img1");
 }

like wise add this to all icons but i think it will result in bad alignment on hover

answered Feb 04 '21 at 12:07

Dinesh s

313
4
19

curveball · Answer 2 · 2021-02-04T12:32:00.553

It can be done with changed html-structure as someone has already mentioned in the comments. For example,

.content {
  display: none;
}

#icon1:hover ~ .col img#img1 {
  display: block;
}

#icon2:hover ~ .col img#img2 {
  display: block;
}

<div class="col side">
    <i id="icon1">First Icon</i> <i id="icon2">Second Icon</i>
    <div>Images:</div>
    <div class="col">
        <img src="https://themcrazycats.files.wordpress.com/2020/11/1ce50-b8480db4-5bda-4912-84e4-3f8d79cae545.jpeg?w=400&h=200&crop=1" id="img1" class="content" alt="" />
        <img src="https://themcrazycats.files.wordpress.com/2020/11/a66f0-4c055b18-860a-46b6-95a2-967b72e3547b.jpeg?w=400&h=200&crop=1" id="img2" class="content" alt="" />
    </div>
</div>

The key here is to make possible usage of css ~ selector by placing .col inside .side. Why? There is no parent selector as of now in css as pointed out here.

Icons could also be placed outside of `.side`, as long as they come before the images — Simone, Feb 04 '21 at 12:26

score 0 · Answer 3 · answered Feb 04 '21 at 12:13

0

You can try some thing like

.content {
display: none;
}
#icon1:hover + #img1{
display: block; // or inline-block
}
#icon2:hover + #img2{
display: block;
}
#icon3:hover + #img3{
display: block;
}
#icon4:hover + #img4{
display: block;
}

answered Feb 04 '21 at 12:13

Mohamed Mondi

21
4

CSS on hover different elments change background img

3 Answers3