Как установить переход для того, когда мышь покидает элемент (наведите указатель мыши)?

Question

У меня есть несколько в виде продуктов, которые меняют свои изображения при наведении на другое изображение. При зависании переход плавный и занимает 0,3 секунды с ease-in-out. Однако, когда мышь покидает элемент, переход происходит внезапно и мгновенно изменяется. Как я могу сделать переходную работу с уходом с мыши?

CSS:

.my-reveal .hidden { 
 
    \t display: block !important; 
 
    \t visibility: visible !important; 
 
} 
 
.product:hover .reveal img { 
 
    \t opacity: 1; 
 
} 
 
.my-reveal { 
 
    \t position: relative; 
 
} 
 
.my-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; 
 
} 
 
.my-reveal:hover .hidden { 
 
    z-index: 2; 
 
    opacity: 1;  
 
}

<div class="my-reveal"> 
 
     <img src="" alt="skirt"> 
 
     <img src="" alt="skirt"> 
 
</div>

Answer 1

Вы должны добавить класс "показанный" на ваш видимое изображение, а затем добавить этот кусок CSS:

.my-reveal .shown { 
    z-index: 2; 
    opacity: 1;  
    -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; 
} 
.my-reveal:hover .shown { 
    z-index: -1; 
    opacity: 0.3;  
} 

Это будет позвольте вашему видимому изображению иметь состояние без зависания с непрозрачностью 1 и состояние зависания с легкостью гладкая анимация.

Answer 2

С текущей компоновкой все, что вам нужно сделать, это непрозрачность перехода скрытого элемента, и это будет переход внутрь и наружу.

.my-reveal { 
 
    position: relative; 
 
} 
 
.hidden { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    transition: opacity 0.3s ease-in-out; 
 
} 
 
.my-reveal:hover .hidden { 
 
    opacity: 1; 
 
}

<div class="my-reveal"> 
 
    <img src="" alt="Bootiful Skirt"> 
 
    <img class="hidden" src="" alt="Bootiful Skirt"> 
 
</div>

Answer 3

Добавить transition в z-index собственности. В состоянии по умолчанию установите его задержку равной длительности перехода opacity и в состоянии :hover сбросить эту задержку до 0.

div{ 
 
    position:relative; 
 
} 
 
div>img:first-child{ 
 
    position:relative; 
 
    z-index:2; 
 
} 
 
div>img:last-child{ 
 
    left:0; 
 
    opacity:0; 
 
    position:absolute; 
 
    top:0; 
 
    transition:opacity .3s ease-in-out,z-index 0s linear .3s; 
 
    z-index:1; 
 
} 
 
div:hover>img:last-child{ 
 
    opacity:1;  
 
    transition-delay:0s; 
 
    z-index:3; 
 
}

<div> 
 
    <img src="" alt="skirt"> 
 
    <img src="" alt="skirt"> 
 
</div>