Создание анимированных галерей изображений с использованием CSS3 эффекты плавного появления и прокрутки

Демонстрация работы эффекта плавного появления изображения, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<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>

CSS

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; }