HTML CSS Image split 3d hover effect

CSS is making images split into 4 items with background size and position.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="image_3d">
        <span></span><span></span><span></span><span></span>
    </div>
</body>
</html>

and

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}
.image_3d{
    perspective: 1000px;
    width: 960px;
    height: 640px;
    box-shadow: 3px 5px 25px 8px rgba(0, 0, 0, 0.2);
}
.image_3d span{
    display: block;
    height: 160px;
    transition: 1s;
    transform: rotateY(0deg);
}
.image_3d:hover span{
    transform: rotateY(360deg);

}
.image_3d span:nth-child(1){
    background: url('./child-5582985_960_720.png') 0px 0px/cover no-repeat;
    transition-delay: 0s;
}
.image_3d span:nth-child(2){
    background: url('./child-5582985_960_720.png') 0px -160px/cover no-repeat;
    transition-delay: .1s;

}
.image_3d span:nth-child(3){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 2)/cover no-repeat;
    transition-delay: .2s;

}
.image_3d span:nth-child(4){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 3)/cover no-repeat;
    transition-delay: .3s;

}

this is actually tricky to make image splitting.
You can see image properties size it has width: 960px; height: 640px;
so here is the trick.
Just making span tags we can split by doing their background-position and background-size.
If you like this tutorial, don't forget to share your thoughts.
Bye.

Blog

HTML CSS Image split 3d hover effect

Nikhil Chandra Roy

HTML CSS Image split 3d hover effect

Join Our Newsletter. No Spam, Only the good stuff.

Related