Всем привет. Нужно сделать, чтобы при наведении курсора плавно менялась картинка. Поменять изображение средствами 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
просто меняю цвет фона, то всё прекрасно работает – плавно, как нужно. Не подскажите, как реализовать такой же эффект для фонового изображения?