Learn how to create a awesome cards component using HTML & CSS only

EHSAN. - Jun 24 -

- Dev Community

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