МОДАЛЬНАЯ КАРТИНА НА CSS

[anonymous]

Пример создания модальной картины из изображения на 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>

.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('photo.jpg'); /* Ссылка на фото */
    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%;
}