медленный переход на парения CSS

Question

У меня есть слайдер с фоном, который появляется при наведении курсора мыши здесь: http://nigarn.com

Я попытался множество CSS, чтобы замедлить переход белого фона, но никто из них не работал.

Это то, что я в настоящее время:

.sp-layer { 
 
    opacity: 1 !important; 
 
-moz-transition: opacity 7.5s!important; 
 
    -webkit-transition: opacity 7.5s!important; 
 
    transition: opacity 7.5s!important; 
 
color: #fff; 
 
padding-top: 157px!important; 
 
padding-bottom: 180px!important; 
 
pointer-events: none; 
 
} 
 

 

 
.sp-slide:hover .sp-layer { 
 
    opacity: 1 !important; 
 
-moz-transition: opacity 7.5s!important; 
 
    -webkit-transition: opacity 7.5s!important; 
 
    transition: opacity 7.5s!important; 
 
color: #000; 
 
background:url(http://www.nigarn.com/wp-content/uploads/2016/10/slide-background-2-5.png)no-repeat center top; 
 
padding-top: 157px!important; 
 
padding-bottom: 180px!important; 
 
pointer-events: none; 
 
}

Но фон по-прежнему всплывает сразу. Если у кого-то есть предложение, я ценю.

Answer 1

Прежде всего, вы анимируете свойство opacity, когда вы на самом деле пытаетесь анимировать background-image; opacity никогда не 0 для начала. Во-вторых, в настоящее время нет способа исчезать в background-image через CSS transition.

Как ваше фоновое изображение кажется однородным полупрозрачным цветом, вместо этого вы должны использовать background-color.

.sp-layer { 
    transition: background-color 0.75s; 
} 
.sp-slide:hover .sp-layer { 
    background-color: rgba(255, 255, 255, 0.75); 
}