In this article you are going to learn some awesome features of CSS by creating this image hover able effects
this component is mainly possible because of this css trick
.list .item:hover + * {
filter: brightness(0.6);
transform: translateZ(150px) rotateY(40deg);
}
.list .item:hover + * + * {
filter: brightness(0.4);
transform: translateZ(70px) rotateY(20deg);
}
.list .item:hover + * + * + * {
filter: brightness(0.2);
transform: translateZ(30px) rotateY(10deg);
}
.list .item:has(+ *:hover) {
filter: brightness(0.6);
transform: translateZ(150px) rotateY(-40deg);
}
.list .item:has(+ * + * :hover) {
filter: brightness(0.4);
transform: translateZ(70px) rotateY(-20deg);
}
.list .item:has(+ * + * + *:hover) {
filter: brightness(0.2);
transform: translateZ(30px) rotateY(-10deg);
}
💡 Did you noticed that :hover + * and :has(+ *:hover) properties of CSS is such a valuable & time saving ⌚ feature.
Just look it we do not need any JavaScript to handle this kind of functionality.
get complete code
To get complete code you can follow this post 👇
https://your-codes.vercel.app/create-a-awesome-and-hover-able-card-component-using-html-and-css-only-with-source-code
Top comments (0)