CSS empowers web designers to create an eye-catching cube hover effect, injecting depth and interactivity into web content. With a straightforward HTML structure—utilizing a container and child elements to represent the cube’s faces—and CSS transformations, you can achieve this dynamic effect.
Hovering over the cube triggers smooth 3D transitions, making it ideal for showcasing images, text, or any content you wish to emphasize. Mastery of this technique adds an engaging element to your web design toolkit, appealing to both seasoned developers and beginners.
Elevate user experiences and make your website more memorable by implementing the cube hover effect.
steps to create cubes hover effect in css
1: Create a folder . name whatever you want to give you can give. and create these files which is mentioned bellow under main folder.
2: Create index.html in main file and make sure your extention should be .html
3: Create style.css in main file and make sure your extention should be .css
here is index.html
<!DOCTYPE html>
<html lang="en" >
<!-- Codebyrolex visit our website www.codebyrolex.com -->
<head>
<meta charset="UTF-8">
<title>Codebyrolex - CSS Only Cubes Hover Effects</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="cube">
<div style="--x:-1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:0; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
</div>
<div class="cube">
<div style="--x:-1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:0; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
</div>
<div class="cube">
<div style="--x:-1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:0; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
<div style="--x:1; --y:0;">
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
Here is style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Codebyrolex visit our website www.codebyrolex.com */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25335b;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.container {
position: relative;
top: -80px;
transform: skewY(-20deg);
animation: animate 5s linear infinite;
}
.container .cube {
position: relative;
z-index: 2;
}
.container .cube:nth-child(2) {
z-index: 1;
translate: -60px -60px;
}
.container .cube:nth-child(3) {
z-index: 3;
translate: 60px 60px;
}
.container .cube div {
position: absolute;
display: flex;
flex-direction: column;
gap: 30px;
translate: calc(-70px * var(--x)) calc(-60px * var(--y));
}
.container .cube div span {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
background: #dcdcdc;
z-index: calc(1 * var(--i));
transition: 1.5s;
}
.container .cube div span:hover {
transition: 0s;
background: #ef4149;
filter: drop-shadow(0 0 30px #ef4149);
}
.container .cube div span:hover:before, .container .cube div span:hover:after {
transition: 0s;
background: #ef4149;
}
.container .cube div span:before {
content: "";
position: absolute;
left: -40px;
width: 40px;
height: 100%;
background: #fff;
transform-origin: right;
transform: skewY(45deg);
transition: 1.5s;
}
.container .cube div span:after {
content: "";
position: absolute;
top: -40px;
left: 0px;
width: 100%;
height: 40px;
background: #f2f2f2;
transform-origin: bottom;
transform: skewX(45deg);
transition: 1.5s;
}final words
This post about how we can create cubes hover effect only with css . hope you like it . if you like it then please share this post with your friends. And thanks for visiting us.
