Pure Css Change Big Image On Hover Over Thumbnails

I have this html code:

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>

Solution 2:

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

Share