<figure id="simple-crossfade-gallery"> <img src="http://thenewcode.com/assets/images/wooly-sunbonnet.jpg" alt="" style="position: static; opacity: 0; transition: none"> <img src="http://thenewcode.com/assets/images/wooly-sunbonnet.jpg" alt="Wooly Sunbonnet"> <img src="http://thenewcode.com/assets/images/pasture-rose.jpg" alt="Pasture Rose"> <figcaption style="color:#fff;padding-bottom:1rem">Простой эффект плавного появления изображения:<br/>наведите указатель мыши на изображение, чтобы увидеть его в действии</figcaption> </figure>
figure { margin: 0px; text-align: center; } figure#simple-crossfade-gallery { position: relative; width: 100%; background: #333; padding-bottom: 3rem; } figure#simple-crossfade-gallery img { width: 50%; position: absolute; margin-left: 25%; left: 0; transition: opacity 2s ease-in-out; } figure#simple-crossfade-gallery img:hover { opacity: 0; }