Эффекты для фото 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><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>
А в этом варианте одну картинку прописываем шесть раз. Код добавляем так же в редактор блога, когда пишете статью.<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
Комментарии со спамом удаляются.