CSS Split Image on hover | Efecto Dividir imagen CSS

Split image on hover CSS| Efecto Dividir imagen al pasar el cursor solo con CSS y HTML

By YJ

DEMO
HTML

<div class="card">
<div class="img"> <span></span><span></span><span></span><span></span></div>
<div class="content">
<h2> MacBook Air</h2>
<h2>Lightness</h2>
<h4>The most loved Mac is about to make you fall in love all over again. Available in silver, space gray, and gold, the new thinner and lighter MacBook Air features a brilliant Retina display, Touch ID, the latest-generation keyboard, and a Force Touch trackpad</h4>
</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Poppins);
body,html{margin:0;padding:0;width:100%;height:100vh;background:#141E30;background:-webkit-linear-gradient(to top,#243B55,#141E30);background:linear-gradient(to top,#243B55,#141E30);display:flex;justify-content:center;align-items:center;font-family:Poppins,sans-serif;overflow:hidden}
.card{border-radius:16px;width:360px;height:360px;background:url(https://picsum.photos/360/360?image=0);position:relative;overflow:hidden;box-shadow:0 5px 50px rgba(0,0,0,.85)}
.card:before{content:"";position:absolute;width:100%;height:100%;top:0;background-color:rgba(0,0,0,.92)}
.card .img{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}
.card .img span{width:25%;height:100%;background:url(https://picsum.photos/360/360?image=0);transition:.5s}
.card .img span:nth-child(1){background-position:0;transition-delay:0}
.card .img span:nth-child(2){background-position:33.33333%;transition-delay:.1s}
.card .img span:nth-child(3){background-position:66.66666%;transition-delay:.2s}
.card .img span:nth-child(4){background-position:100%;transition-delay:.3s}
.card:hover .img>span{transform:translateY(-100%)}
.card:hover .content{transform:translateY(0%);transition:1s;transition-delay:.1s}
.content{box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;padding:20px;width:100%;height:100%;transform:translateY(100%)}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Magnifying Effect on Image
CSS Gradient Hover Effect.
Genial efecto en imagen al pasar cursor