Эффекты для оформления картинок

Красивые фото хочется оформить на сайте необычно, интересно. Сегодня предлагаю посмотреть несколько видов оформления картинок. Коды на css, без скриптов. Оформить фотографии можно как в статье, так и на страницах, например, Об авторе.

Посмотреть работу кодов можно в редакторе.

Модульное оформление

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

Картинка с hover эффектом. Наведите курсор на изображение.

В коде меняем картинку на свою — отметила красным.

Точный размер фотографии прописываем в коде — отметила синим. Пишем и ширину (width), и высоту (height).