Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Pure Css

Pure Css Change Big Image On Hover Over Thumbnails

Post a Comment
I have this html code:
Teak Cleaner</div><h2 id="solution_1">Solution 1: </h2><div class="answer-desc"><p>Both the thumbnails and the main image need to be siblings (or parent/child) for hover to work.</p><p>Based on your sample code I assume the <code>thumbnail</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;
}
<divclass="main-img"><imgsrc="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" /><imgsrc="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" /><imgid="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"><imgid="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.

You may like these posts

Post a Comment for "Pure Css Change Big Image On Hover Over Thumbnails"