CSS;Как сделать так, чтобы эффекты перехода при наведении на изображение включались и выключались? - PullRequest
Новая
       27

CSS;Как сделать так, чтобы эффекты перехода при наведении на изображение включались и выключались?

0 голосов
/ 04 октября 2018

Я редактирую тему электронной коммерции Shopify и хочу добиться этого маленького эффекта "наведения" на изображениях (прокрутите вниз до продуктов и наведите курсор на изображение продукта)

Iпоследовал учебник по Shopify, и он сказал, чтобы реализовать этот CSS: 

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}

Этот фрагмент кода сработал, и в результате было что-то вроде этого

Видите ли вы разницу?Это как когда вы перемещаете мышь на , нет перехода .Я знаю, что это можно сделать, потому что я вижу это по первой ссылке, но как?Пожалуйста, помогите

1 Ответ

0 голосов
/ 04 октября 2018

Просто удалите z-index: -1, и он будет работать.

Z-index мгновенно скрывал изображение, находящееся за основным изображением, поэтому анимация не работает должным образом.Так как наведенное изображение имеет opacity, в этом случае нет необходимости иметь z-index: -1.

...