Прозрачность изображения при наведении на родительский блок

Question

Имеется карточка товара на вукомерс. Вместо одной картинки, при помощи functions.php я добавляю вторую с классом dop-image. Результат: При наведении на блок - дополнительная картинка меняет opacity с 0 на 1. Отлично, все работает! Но в том случае, когда нет дополнительной картинки, и в карточке всего одна, то она при наведении исчезает. Как исправить эту проблему?

Заранее спасибо.

Код (Опустил все ненужное)

<div class="image-tovar">

   <picture>
      <sourse data-src="">
      <img class="dop-image">
   </picture>

   <picture>
      <sourse data-srcset="">
      <img class="attachment-woocommerce_thumbnail">
   </picture>
</div>

<style>
.image-tovar .dop-image {
    opacity:0!important;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    float: left;
}
.image-tovar:hover .dop-image {
    opacity:1!important;
}
.image-tovar:hover img {
    opacity:0!important;}
</style>

Answer 1

Приблизительно так

body{
  display: flex;
}

.image-tovar {
  position: relative;
  margin-right: 20px;
}

.image-tovar .dop-image {
  opacity: 0 !important;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  float: left;
}

.image-tovar:hover .dop-image {
  opacity: 1 !important;
}

.image-tovar:hover picture + picture img {
  opacity: 0 !important;
}

<div class="image-tovar">
<picture>
  <img class="dop-image" src="https://placeimg.com/100/100/animals">
  </picture>
  <picture>
  <img class="attachment-woocommerce_thumbnail" src="https://placeimg.com/100/100/arch">
  </picture>
</div>

<div class="image-tovar">
<picture>
  <img class="attachment-woocommerce_thumbnail" src="https://placeimg.com/100/100/arch">
  </picture>
</div>

БЛОГ НА HUSL

Прозрачность изображения при наведении на родительский блок

Ответы (1 шт):