Эффекты для оформления картинок
Посмотреть работу кодов можно в редакторе.
Картинка с hover эффектом. Наведите курсор на изображение.
Модульное оформление
<div class="modalpic">
<div class="picblock">
<div class="side picmain"></div>
<div class="side picleft"></div>
</div>
<div class="picblock">
<div class="side picmain"></div>
<div class="side picleft"></div>
</div>
<div class="picblock">
<div class="side picmain"></div>
<div class="side picleft"></div>
</div>
</div>
<style>
.modalpic {
position: relative;
width: 100%;
padding-top: 50%;
margin: 20px auto;
}
.modalpic > .picblock {
position: absolute;
height: 100%;
width: 30%;
perspective: 1400px;
}
.modalpic > .picblock:nth-of-type(1) {
height: 80%;
top: 10%;
left: 20%;
width: 15%;
}
.modalpic > .picblock:nth-of-type(2) {
top: 0;
left: 38%;
}
.modalpic > .picblock:nth-of-type(3) {
height: 80%;
top: 10%;
left: 67%;
width: 15%;
}
.modalpic > .picblock > .side {
position: absolute;
top: 0;
left: 0;
background-image: url(' Ссылка на фото ');
background-size: auto 100%;
box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);
}
.modalpic > .picblock > .side.picmain {
height: 100%;
width: 100%;
transform: rotateY(26deg);
transform-origin: 0 50%;
}
.modalpic > .picblock > .side.picleft {
height: 100%;
width: 20%;
transform-origin: 0 50%;
transform: rotateY(-60deg) translateX(-100%);
filter: brightness(40%);
}
.modalpic > .picblock:nth-of-type(1) > .side.picmain {
background-position: 4% 50%;
background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(1) > .side.picleft {
background-position: 0 50%;
background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(2) > .side.picmain {
background-position: 50% 0;
}
.modalpic > .picblock:nth-of-type(2) > .side.picleft {
background-position: 28.5% 0;
}
.modalpic > .picblock:nth-of-type(3) > .side.picmain {
background-position: 96% 50%;
background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(3) > .side.picleft {
background-position: 78% 50%;
background-size: auto 130%;
}
</style>
Красным выделила в коде место, куда нужно вставить вашу фотографию. Фото — жалюзи
<div class="blind-hover">
<div><img src="photo.jpg" /></div>
<div><img src="photo.jpg" /></div>
<div><img src="photo.jpg" /></div>
<div><img src="photo.jpg" /></div>
<div><img src="photo.jpg" /></div>
</div>
<style>
.blind-hover {
margin: 20px 0;
font-size: 0;
letter-spacing: 0;
}
.blind-hover div {
display: inline-block;
overflow: hidden;
width: 20%;
transform: rotateY(0);
transition: all 0.5s ease-out;
}
.blind-hover div img {
width: 500%;
max-width: 500%;
position: relative;
}
.blind-hover div:nth-of-type(1) {
transition-delay: 0;
}
.blind-hover div:nth-of-type(2) {
transition-delay: 0.2s;
}
.blind-hover div:nth-of-type(3) {
transition-delay: 0.4s;
}
.blind-hover div:nth-of-type(4) {
transition-delay: 0.6s;
}
.blind-hover div:nth-of-type(5) {
transition-delay: 0.8s;
}
.blind-hover div:nth-of-type(2) img {
right: 100%;
}
.blind-hover div:nth-of-type(3) img {
right: 200%;
}
.blind-hover div:nth-of-type(4) img {
right: 300%;
}
.blind-hover div:nth-of-type(5) img {
right: 400%;
}
.blind-hover:hover div {
transform: rotateY(360deg);
}
</style>
Для фото применён hover-эффект. Добавляем в код 5 одинаковых фото. Выделила в коде красным цветом. Размеры — ширину и высоту придётся подгонять под свои фото. Коды нашла на atuin.ru Ретро-эффект
<figure>
<img alt="" src="картинка" />
</figure>
<style>
figure {
box-shadow:inset 0 0 100px rgba(0,0,20,.7), 0 5px 15px rgba(0,0,0,.5);
background:-webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
width:700px; height:537px; }
figure img {
-webkit-filter:sepia(0.2) brightness(1.1) contrast(1.3);
transition:-webkit-filter 0.3s ease-in-out;
position:relative; z-index:-1; }
figure:hover { background:none; }
figure:hover img { -webkit-filter:sepia(0) brightness(1) contrast(1); }
{ background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png) repeat; }
figure { margin:20px auto; }
</style>
В коде меняем картинку на свою — отметила красным.
Точный размер фотографии прописываем в коде — отметила синим. Пишем и ширину (width), и высоту (height).
Комментарии со спамом удаляются.