Эффект картинки гармошкой при наведении CSS

Эффект картинки гармошкой при наведении CSS

Эффект картинки гармошкой при наведении CSS может пригодится для отображении карты, так же можно использовать этот эффект для галереи изображений.

Пример

HTML


<ul class="press">
  <li class="press-item"></li>
  <li class="press-item"></li>
  <li class="press-item"></li>
  <li class="press-item"></li>
</ul>

CSS


.press {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 640px;
  height: 360px;
  display: flex;
}
.press-item {
  list-style: none;
  width: 25%;
  background: url(image.jpg);
  background-size: cover;
  height: 100%;
  transition: 0.5s;
}
.press:hover .press-item:nth-child(odd) {
  transform: skewY(15deg);
  box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.press:hover .press-item:nth-child(even) {
  transform: skewY(-15deg);
  box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.press .press-item:nth-child(1) {
  background-position: 0;
}
.press .press-item:nth-child(2) {
  background-position: -160px;
}
.press .press-item:nth-child(3) {
  background-position: -320px;
}
.press .press-item:nth-child(4) {
  background-position: -480px;
}
By julia