crossfading div фоны на: hover - возможно в CSS?

Question

Есть ли способ сгладить переход во время изменения фона div? В идеале я хотел бы сделать это внутри css и не использовать js.

В моей CSS у меня есть:

.examplediv { 
    background: url(img_img.png); 
} 

.examplediv:hover{ 
    background: url(brighter_img.png); 
} 

Это делает то, что я хотел бы, чтобы это сделать (изменение картины), но если бы был способ, чтобы сделать два фона «растворяются» друг в друга, С благодарностью я начал вспенивать рот.

Примечание: Эффект, который я собираюсь сделать, по существу, представляет собой непрозрачность, поэтому, если проще закодировать раствор, с: непрозрачность, я все уши!

Цистерны! ~

Answer 1

Это возможно, используя только CSS. Смотрите эту скрипку для примера: https://jsfiddle.net/ffqdmcws/

HTML:

<div class="crossfade"> 
    <div class="static"></div> 
    <div class="hover"></div> 
</div> 

CSS:

.crossfade { 
    position: relative; 
    width: 300px; 
    height: 200px; 
} 

.static, .hover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transition: opacity 1s ease; 
} 

.static { 
    background: url('http://lorempixel.com/300/200/food'); 
    opacity: 1; 
} 

.hover { 
    background: url('http://lorempixel.com/300/200/cats'); 
    opacity: 0; 
} 

.crossfade:hover > .static { 
    opacity: 0; 
} 

.crossfade:hover > .hover { 
    opacity: 1; 
} 

В этом случае у меня есть контейнер DIV с помощью crossfade класса, и несколько других divs внутри этого, используя классы static и hover.

Класс static содержит фон, который будет показан первоначально, а класс hover содержит фон, который будет исчезать до наведения. Исходные непрозрачности равны 1 для класса static и 0 для класса hover, поэтому вы видите только div с классом static.

Затем, если вы подключите действие при наведении на контейнер DIV с помощью .crossfade:hover, для того, чтобы установить opacity: 0; для static и opacity: 1; для hover, который скрывает static и показывает hover, при наведении курсора мыши на контейнере дел.

Наконец, чтобы сделать перекрытие фона, используйте absolute позиционирование двух внутренних div, так что они всегда друг на друга. Кроме того, для истинного эффекта кроссфейда вам понадобится правило transition: opacity 1s ease;, в котором говорится, что вы хотите, чтобы непрозрачность переключалась в течение 1 секунды вместо переключения мгновенно. Оба divs, изменяющие непрозрачность от 1-> 0 и от 0-> 1, дают вам эффект кроссфейда фоновых изображений.

Answer 2

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

.examplediv { 
 
    height: 600px; 
 
    position: relative; 
 
} 
 

 
.examplediv:before, .examplediv:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
    transition: opacity 0.5s ease-out; 
 
} 
 

 
.examplediv:before { 
 
    background: url(https://pixabay.com/static/uploads/photo/2015/07/19/17/38/flower-851725_960_720.jpg) 
 
} 
 

 
.examplediv:after { 
 
    background: url(https://pixabay.com/static/uploads/photo/2015/12/07/23/56/pink-flower-1081646_960_720.jpg); 
 
    opacity: 0; 
 
} 
 

 
.examplediv:hover:before { 
 
    opacity: 0; 
 
} 
 

 
.examplediv:hover:after { 
 
    opacity: 1; 
 
}

<div class="examplediv"> 
 

 
</div>

JSFIDDLE