изменить изображение рекомендуемого продукта при наведении курсора, используя css, а не Javascript / Jquery

Question

Я хочу добавить функцию наведения на мой слайдер с одним продуктом без javascript.

. У меня есть большой блок с изображением продукта с изображениями, представленными ниже, и я хочу, чтобы, когда кто-то наводил курсор на миниатюру, он отображался как Большое изображение продукта.

Вот мой код

               [![<div class="Product__gallery" style="width: 400px;height: 400px;border: 1px solid #ececec;">
<input id="img1" type="radio" name="img" checked="">
<input id="img2" type="radio" name="img">
<input id="img3" type="radio" name="img">


<div class="Product__image" id="show1" >
<img src="img/pic1.jpg">
</div>
<div class="Product__image" id="show2">
<img src="img/pic2.jpg">
</div>
<div class="Product__image" id="show3">
<img src="img/pic3.jpg">
</div>

<p class="text-center moveZoomText">Mouse over image to zoom</p>
<section style=" margin-top: -17px; ">
    <label for="img1">
<div class="Product__thumbnail">
<img src="img/pic1.jpg" style="height: 50px;width: 60px;border: 1px solid #CCC;padding: 4px;">
</div>
</label>
<label for="img2">
<div class="Product__thumbnail">
<img src="img/pic2.jpg" style="height: 50px;width: 60px;border: 1px solid #CCC;padding: 4px;">
</div>
</label>
<label for="img3">
<div class="Product__thumbnail" >
<img src="img/pic3.jpg" style="height: 50px;width: 60px;border: 1px solid #CCC;padding: 4px;">
</div>
</label>

</section>][1]][1]

Answer 1

Необходимо создать еще одно новое изображение со встроенным стилем «display: none», а затем добавить несколько css свойств. Примерно так:

в html:

<div class="Product__thumbnail" >
   <img src="img/pic3.jpg" style="height: 50px;width: 60px;border: 1px solid #CCC;padding: 4px;">
   <img class="image-hover" src="img/pic3.jpg" style="display:none">
</div>

в css:

.Product__thumbnail{
  position:relative;
}
.Product__thumbnail img{
  position:absolute;
  z-index:1;
}
.Product__thumbnail:hover img.image-hover{
  display:block!important;
  top:2em;
  left:5em;
  z-index:999;
}