Блог

Я хотел бы создать эффект наведения на изображения моих продуктов, который переходит ко второму изображению, подобному этому:

 .product-img-wrapper img:last-of-type {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
 

Что мне нужно добавить в мой код и где я должен это разместить? Я использую «Аккуратную» тему bigcartel.

Спасибо!

То, что вы написали, является начальным состоянием. Не уверен, что вы хотите, чтобы при наведении курсора происходило. Предположим, вы хотите, чтобы зависшее состояние изображения было видимым. Код будет:

 .product-img-wrapper img:last-of-type:hover {
    opacity: 1;
    visibility: visible;
}