Hello.

How to make such an animation correctly so that the loading of the second image is not noticeable.

.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;
}
  • one picture is on top of another, at the top the opacity changes when you hover – MTV's Fishing Dec 21 '18 at 14:20
  • no way, you need at least to be gif – Tender Termite Dec 21 '18 at 14:23
  • Tender Termite, can you read more? – Pagan Dodgeball Dec 21 '18 at 14:30
  • Pagan Dodgeball https://codepen.io/QDeltaE/pen/VWGYOB – Tender Termite Dec 21 '18 at 14:45
  • You need to upload both pictures at once.You can put it in an invisible img, you can glue two sprites into one. – Spirit96 Dec 22 '18 at 16:16
  • Tender Termite, Why gif? There's just a smooth change of two images – Spirit96 Dec 22 '18 at 16:19

3 Answers 3

gif, flash, video
oh no jpg
impose one picture on top of another, change the transparency on hover
<a href="#"><img title="for example the name of that person" onmouseover="this.src='/picture after';" onmouseout="this.src='picture before';" src="picture up to" height="30" width="30"></a>