DEV Community

loading...
Cover image for HTML CSS Image split 3d hover effect

HTML CSS Image split 3d hover effect

nikhilroy2 profile image Nikhil Chandra Roy ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
sojasmine profile image
Sojasmine Gjerstad

Love it❀️. Thank you for sharing.

Forem Open with the Forem app