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;
}
- 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)