DEV Community

Cover image for Hoverable Card with CSS

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{
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 -
LinkedIn -
Email -

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> <--

Also check these posts as well

Top comments (0)