DEV Community

Cover image for HTML CSS Image split 3d hover effect
Nikhil Chandra Roy
Nikhil Chandra Roy

Posted on

HTML CSS Image split 3d hover effect

HTML CSS Image split 3d hover effect

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

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



    box-sizing: border-box;
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
    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.

Top comments (1)

sojasmine profile image
Sojasmine Gjerstad

Love it❀️. Thank you for sharing.