Pure css change Big image on hover over thumbnails

Question

I have this html code:

<div class="main-img">
  <img id="main" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

  <p class="single-thumbnail-p">
    <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
    <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
  </p>
</div>

What i want to do is change the main image bacground or src using pure css, i know that src can not be changed but is there is any way with which i can change big image on hover of thumbnails ?

Thanks!

Try this [link](https://stackoverflow.com/questions/27961873/changing-images-on-hover-with-css-html) — Thennarasan, Jun 01 '17 at 07:24
You can use CSS background image, but I think use Javascript (or jQuery) is better. — Robin Huy, Jun 01 '17 at 07:25
Using js i can do it pretty easily but thing is js is not allowed only html and css — Pradeep Srivastava, Jun 01 '17 at 07:27
Let me know if my answer worked and can be accepted, or else I delete it. — Asons, Jun 03 '17 at 11:13
Thanks not a ideal one as it changes html structure but i think it will help me and alot of others as well :) — Pradeep Srivastava, Jun 05 '17 at 10:06

score 0 · Accepted Answer · answered Jun 01 '17 at 11:38

Both the thumbnails and the main image need to be siblings (or parent/child) for hover to work.

Based on your sample code I assume the thumbnail's should be below, so here I positioned them before the main-image in the markup and used absolute to move them below, so CSS hover will work. You can also do this with Flexbox and its order property, though it has less browser support.

.main-img {
  position: relative;
  padding-bottom: 10px;
}
.main-img .thumbnail {
  position: absolute;
  top: 100%;
  width: 100px;
}
.main-img .main-image {
  display: block;
  height: 200px;
}
.main-img .thumbnail + .thumbnail {
  left: 160px;
}
#main2 {
  display: none;
}
.main-img .thumbnail + .thumbnail:hover ~ #main1 {
  display: none;
}
.main-img .thumbnail + .thumbnail:hover ~ #main2 {
  display: block;
}

<div class="main-img">

  <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
  <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />

  <img id="main1" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

  <img id="main2" src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

</div>

score -1 · Answer 2 · answered Jun 01 '17 at 07:34

-1

You can use background image.Add above three images as background image.then on hover change background.

answered Jun 01 '17 at 07:34

Nighina t t

140
1
4
15

Yep thats what i was thinking but how will big image background will be changed on hover of thumbnail and how will we know which image need to be changed as big image on hover of a thumbnail any clues ? – Pradeep Srivastava Jun 01 '17 at 07:44

Pure css change Big image on hover over thumbnails

2 Answers2

Linked