DEV Community

Cover image for Hoverable Card with CSS
Shubham Tiwari
Shubham Tiwari

Posted on

Hoverable Card with CSS

Hello Everyone today i will show you a hoverable Card created with CSS.What it does is,it will show the contacts icons at the bottom when we hover over the card.

Let's get started...

  • What i did is , i created a card component with a heading,a paragraph, a button and contact links at the bottom.
  • Contact icons are hidden with opacity set to 0.
  • They will be visible only when we hover over the card.I used the hover pseudo class with descendend selector
.card:hover .bottom-links{
    opacity:1;
}
Enter fullscreen mode Exit fullscreen mode
  • It says when we hover over the card, then make the container with class bottom-links opacity to 1, making it visible

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)