Интересный эффект для оформления картинок
Слайдер на CSS, без скриптов. Оформить можно 3 картинки. Добавляется код в статью или на страницу Блогспота, в редактор, в режиме HTML.
Выглядит слайдер так: в спокойном состоянии видны две картинки, а при наведении курсора они открываются по типу штор и исчезают. Видна только большая центральная картинка, которая слегка увеличивается(приближается). Эффект подходит для оформления разнообразных фото загадок, когда за шторками прячут отгадку. Например: "сколько лет этому человеку" или "где прячется предмет". А так же для показа картинок "до и после". Например: "как выглядит девушка до стрижки и после".
Код
<center><div id="grid">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style>* {
padding: 0;
margin: 0;
box-sizing: border-box;
transition: 0.75s ease;
}
#grid {
width: calc(100% - 20vmin);
aspect-ratio: 16 / 7;
background: linen;
display: grid;
grid-template-columns: 1fr 0fr 1fr;
place-items: center;
outline: 2px solid #804a00;
border-radius: 5vmin;
box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
overflow: hidden;
}
.left,
.right,
.middle {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform-origin: center;
}
.left {
background-image: url("ваше фото");
border-right: 1px solid #804a00;
}
.middle {
font-size: 0rem;
background-image: url("ваше фото");
}
.right {
background-image: url("ваше фото");
border-left: 1px solid #804a00;
}
#grid:hover {
grid-template-columns: 0fr 1fr 0fr;
}
</style> </center>
Изменения
Красным в коде выделила цвет рамки — меняете на свой цвет.
Синим выделила место, куда добавляется адрес картинок. Вставляет урл своих изображений.
Слайдер довольно объёмный, почти на всю страницу статьи. Маленькие фото в слайдере будут растягиваться и терять качество изображения, поэтому добавляйте картинки среднего размера. А чтобы они не были большими по весу и не нагружали страницу, поработайте над уменьшением их веса. На блоге есть об этом статья.
Комментарии со спамом удаляются.