Даже и не знаю, как это охарактеризовать, но вот что нужно сделать при наведении на изображение:
Реально ли такое сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуДаже и не знаю, как это охарактеризовать, но вот что нужно сделать при наведении на изображение:
Реально ли такое сделать?
body {
margin: 0;
padding: 0;
}
.folded {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 320px;
height: 200px;
display: flex;
}
.folded-itm {
list-style: none;
width: 25%;
background: url(https://i1.wallbox.ru/wallpapers/preview/201243/devushki-c67fe6c5a8dd.jpg);
background-size: cover;
height: 100%;
transition: 0.5s;
}
.folded:hover .folded-itm:nth-child(odd) {
transform: skewY(15deg);
box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.folded:hover .folded-itm:nth-child(even) {
transform: skewY(-15deg);
box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.folded .folded-itm:nth-child(1) {
background-position: 0;
}
.folded .folded-itm:nth-child(2) {
background-position: -80px;
}
.folded .folded-itm:nth-child(3) {
background-position: -160px;
}
.folded .folded-itm:nth-child(4) {
background-position: -240px;
}
<ul class="folded">
<li class="folded-itm"></li>
<li class="folded-itm"></li>
<li class="folded-itm"></li>
<li class="folded-itm"></li>
</ul>
Присоседиться что ли к @vantal? Собственно, вот:
body {margin: 0; padding: 0; background: #fafafb;}
.stack {position: absolute; top: 50%; left: 50%; margin-top: -80px; margin-left: -250px; text-align: center; transition: all 2.5s}
.stack span {float: left; display: block; width: 100px; height: 120px; line-height: 120px; background: #bcbbbb; color: #bcbbbb; font-weight: bold; font-size: 40px; font-family: sans-serif; transition: all 1.2s;}
.stack span:nth-child(1) {border-radius: 10px 0 0 10px;}
.stack span:nth-child(5) {border-radius: 0 10px 10px 0;}
.stack:hover span:nth-child(even) {transform: skewY(15deg); color: #f48024; box-shadow: 0 40px 10px rgba(0, 0, 0, .1), inset 0px 0 130px rgba(0, 0, 0, .1);}
.stack:hover span:nth-child(odd) {transform: skewY(-15deg); color: #f48024; box-shadow: 0 40px 10px rgba(0, 0, 0, .1);}
.stack:hover {transform: rotateX(25deg)}
.stack:hover span {text-shadow: -0 -1px 0 darkgray, 0 -1px 0 darkgray, -0 1px 0 darkgray, 0 1px 0 darkgray, -1px -0 0 darkgray, 1px -0 0 darkgray, -1px 0 0 darkgray, 1px 0 0 darkgray, -1px -1px 0 darkgray, 1px -1px 0 darkgray, -1px 1px 0 darkgray, 1px 1px 0 darkgray, -1px -1px 0 darkgray, 1px -1px 0 darkgray, -1px 1px 0 darkgray, 1px 1px 0 darkgray;}
<div class="stack"><span>S</span><span>T</span><span>A</span><span>C</span><span>K</span></div>