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, может поможет Commented 26 апр. 2016 в 9:25

3 ответа 3

2

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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