Stack Motion Hover Effects only on CSS

You block advertising

Please disable ad blocker

Recently met an interesting animation on the hover – Stack Motion Hover Effects, which creates the effect of lifting layers from the stack. We tried to make it and understood that the implementation is not the best, sometimes does not work at all or works with bugs. And we made own effect only on CSS.

HTML разметка такая:

 
<div class="image-list">
    <div class="image">
      <img src="https://an2-studio.xyz/wp-content/uploads/2018/01/754-450x180.jpg">
      <div class="stack stack-1"></div>
      <div class="stack stack-2"></div>
      <div class="stack stack-3"></div>
      <div class="stack stack-4"></div>
    </div>
    <div class="image">
      <img src="https://an2-studio.xyz/wp-content/uploads/2018/01/r775-450x180.jpg">
      <div class="stack stack-1"></div>
      <div class="stack stack-2"></div>
      <div class="stack stack-3"></div>
      <div class="stack stack-4"></div>
    </div>
</div>

The essence of creating four additional blocks, which we will animate (you can replace the pseudo-elements before and after). Explain the styles do not see the point, it’s very simple. We add the transition property to the image and the additional blocks and when hovering change the positioning and transparency.

.image-list {
    display: flex;
    flex-wrap: wrap;
    margin: 100px auto 0;
    justify-content: space-between;
    width: 940px;
}
.image {
    align-self: flex-start;
    position: relative;
    max-width: 450px;
}
.image-list img {
    position: relative;
    top: 0;
    z-index: 2;
}
.image-list .stack {
    background: #000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.image img,
.image .stack {
    transition: all 0.3s ease;
}
.image .stack {
    position:absolute;
}
.image:hover img {
    top: -24px;
    transform: scale(1.05);
}
.image:hover .stack-1 {
    opacity: 0.2;
    top: 0px;
    transform: scale(1.01);
}
.image:hover .stack-2 {
    opacity: 0.4;
    top: -6px;
    transform: scale(1.02);
}
.image:hover .stack-3 {
    opacity: 0.6;
    top: -12px;
    transform: scale(1.03);
}
.image:hover .stack-4 {
    opacity: 0.8;
    top: -18px;
    transform: scale(1.04);
}

Demo Source

You block advertising

Please disable ad blocker

Comments (0)