1

Всем привет. Нужно сделать, чтобы при наведении курсора плавно менялась картинка. Поменять изображение средствами css удаётся. Не получается сделать плавный переход.

Пытался сделать так:

#image{
    background: url('image.jpg');
    display: block;
    width: 300px;
    height: 250px;
    margin: 0px auto;
    -moz-transition: background-image 0.2s ease-in-out;
    -webkit-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
}

#image:hover {
    background: url('hover.jpg');
}

Но картинка появляется резко. Если же через transition просто меняю цвет фона, то всё прекрасно работает – плавно, как нужно. Не подскажите, как реализовать такой же эффект для фонового изображения?

1
  • попробуй в CSS добавить animation-timing-function, может поможет 26 апр 2016 в 9:25

3 ответа 3

2

Из пяти современных браузеров ваш код не сработал только в IE. И это чудо, т.к. по спецификации W3C свойство background-image не является анимируемым. Нужно либо писать анимацию на JS, либо менять тип анимации. Под последним я подразумеваю использование свойства position-absolute: склеиваете два фона в один и задаёте смещение для hover. Тогда изображение будет плавно выкатываться сверху/справа/снизу/слева (как настроите).

Можно вообще обойтись без фона.

2
  • Спасибо, но 2ой способ - не вариант. Есть картинка, при наведении на которую анимируеться сдвиг её, и при этом плавно появляется картинка-ховер, ну ладно, буду думать средствами js.
    – user190134
    9 сен 2015 в 23:43
  • 1
    @user190134 пока писали, я третий добавил. :) 9 сен 2015 в 23:43
2

Пробовали через opacity?

.image{
   opacity: 1;
   transition: 0.2s ease-in-out;
   }

.image:hover {
   opacity: 0;
   transition: 0.2s ease-in-out;
   }
  • попробуйте повесить transition и на :hover тоже
0

Была такая же проблема. Сработало с помощью "cubic-bezier" в "transition"

.btn { 
  .  .  .
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out; box-shadow: 0 2px 2px 0 rgba(247, 25, 25, 0.25); 
  .  .  .
}

.btn-second:hover {
  .  .  .
  box-shadow: 0 14px 26px -12px rgba(247, 25, 25, 0.42), 0 4px 23px 0px rgba(247, 25, 25, 0.12), 0 8px 10px -5px rgba(247, 25, 25, 0.2);
  background: linear-gradient(to right, #E61E1E, #F71919);
  color: #fff;
  .  .  .
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.