Как правильно сделать такое анимацию?

Question

[Cosmonaut .]

Здравствуйте .

Как правильно сделать такое анимацию чтобы загрузка второго картинки было не заметно.

.sm1{
	width: 210px;
    height: 200px;
    background: url("/uploads/staff/m1.jpg") no-repeat;
    transition:all 0.3s;
}

.sm1:hover{
	width: 210px;
    height: 200px;
    background: url("/uploads/staff/m2.jpg") no-repeat;
    transition:all 0.3s;
}

Comments

[r_mustang]

одна картинка сверху другой, у верхней меняется opacity при наведении

[Владислав Лысков]

никак, нужно как минимум что бы это было gifкой

[Cosmonaut .]

Владислав Лысков, можете подробнее?

[Владислав Лысков]

Cosmonaut ., https://codepen.io/QDeltaE/pen/VWGYOB

[Сергей delphinpro]

Нужно загружать сразу обе картинки. Можно в невидимый img, можно две в один спрайт склеить.

[Сергей delphinpro]

Владислав Лысков, Зачем гифка-то? Там же просто плавная смена двух изображений

Answer 1

[nvdfxx]

одну картинку поверх другой наложить, при наведении менять прозрачность

Answer 2

[азаза]

gif, flash, video
о не jpg

Answer 3

[pavlovaleksi]

<a href="#"><img title="к примеру имя того человека" onmouseover="this.src='/картинка после ';" onmouseout="this.src='картинка до ';" src="картинка до" height="30" width="30"></a>