Эффекты для фото css

Добрый день. И снова о картинках на блоге. Сегодня картинки будем сдвигать и раздвигать.
Эффекты сделаны с использованием свойства CSS Transition.
Нам нужна будет всего одна картинка, но прописать в коде её нужно будет пять раз.

“Сдвинутые” картинки

Вариант первый — вертикальный сдвиг

Код

<div class="Fono">
<div><img src="картинка" /></div>
<div><img src="картинка" /></div>
<div><img src="картинка" /></div>
<div><img src="картинка" /></div>
<div><img src="картинка" /></div>
</div>
<style>
.Fono {
    margin: 30px;
    font-size: 0;
    letter-spacing: 0;
} 
.Fono div {
    transition: all 300ms ease-out;
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 20%;
    top: 0;
}
.Fono div img {
    width: 500%;
    max-width: 500%;
    position: relative;
}
.Fono div:nth-of-type(2) img {
    right: 100%;
}
.Fono div:nth-of-type(3) img {
    right: 200%;
}
.Fono div:nth-of-type(4) img {
    right: 300%;
}
.Fono div:nth-of-type(5) img {
    right: 400%;
}
.Fono:hover div:nth-of-type(2),
.Fono:hover div:nth-of-type(4) {
    top: 20px;
}
.Fono:hover div:nth-of-type(1),
.Fono:hover div:nth-of-type(3),
.Fono:hover div:nth-of-type(5){
    top: -20px;
}</style>

Код добавляем в редактор блога, в режиме хтмл.

Вариант второй — горизонтальный сдвиг

Код

<div class="Fono-1">
<img src="картинка" />     
<div>
<img src="картинка" /></div>
<div>
<img src="картинка" /></div>
<div>
<img src="картинка" /></div>
<div>
<img src="картинка" /></div>
<div>
<img src="картинка" /></div>
</div>
<style>
.Fono-1 {
    position: relative;
    margin: 30px;
}
.Fono-1 img {
    width: 100%;
    position: relative;
}
.Fono-1 > img {
    opacity: 0;
}
.Fono-1 div {
    transition: all 300ms ease-out;
    position: absolute;
    overflow: hidden;
    height: 20%;
    left: 0;
    width: 100%;
    top: 0;
}
.Fono-1 div:nth-of-type(2) {
    top: 20%;
}
.Fono-1 div:nth-of-type(3) {
    top: 40%;
}
.Fono-1 div:nth-of-type(4) {
    top: 60%;
}
.Fono-1 div:nth-of-type(5) {
    top: 80%;
}
.Fono-1 div:nth-of-type(2) img {
    bottom: 100%;
}
.Fono-1 div:nth-of-type(3) img {
    bottom: 200%;
}
.Fono-1 div:nth-of-type(4) img {
    bottom: 300%;
}
.Fono-1 div:nth-of-type(5) img {
    bottom: 400%;
}
.Fono-1:hover div:nth-of-type(2),
.Fono-1:hover div:nth-of-type(4) {
    left: -20px;
}
.Fono-1:hover div:nth-of-type(1),
.Fono-1:hover div:nth-of-type(3),
.Fono-1:hover div:nth-of-type(5){
    left: 20px;
}</style>

А в этом варианте одну картинку прописываем шесть раз. Код добавляем так же в редактор блога, когда пишете статью.
Посмотреть эффект можно на тестовом блоге.
Код взят на сайте https://atuin.ru