Блог

У меня есть слайдер с фоном, который появляется при наведении курсора мыши здесь: 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;
}  

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

Прежде всего, вы анимируете opacity свойство, когда на самом деле пытаетесь анимировать background-image ; opacity никогда 0 не начинайте с. Во-вторых, в настоящее время нет способа fade в a 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);
}