Display Content on hovering Card using CSS
In this article, we will see how we can create a card which displays content on hovering using the hover property using HTML and CSS.
HTML Code: In this section, we will create the structure of our HTML card.
- Create a “div” with class name “card”.
- Create another “div” inside the main “div” with class name “card__inner”.
- Add heading “h2” and paragraph inside the second “div” with some random content.
HTML
<!DOCTYPE html> < html > < body > <!-- div with class which will act as a container for us --> < div class = "card" > <!-- Content of card to be display on hovering --> < div class = "card__inner" > < h2 >w3wiki</ h2 > < p > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </ p > </ div > </ div > </ body > </ html > |
CSS Code: In this section, we will assign general properties to the element using CSS.
CSS
<style> /* Assigning general property to card */ .card { position : relative ; width : 20 rem; height : 30 rem; background- size : cover; background-color : black ; background-image : url ( 'one.png' ); border-radius: 20px ; background-position : center ; overflow : hidden ; } /* Assigning properties to inner content of card */ .card__inner { background-color : rgba( 0 , 0 , 0 , 0.9 ); color : #fff ; position : absolute ; top : 0px ; bottom : 0px ; left : 0px ; right : 0px ; z-index : 1 ; opacity: 0 ; padding : 2 rem 1.3 rem 2 rem 2 rem; transition: all 0.4 s ease 0 s; } /* On hovering card opacity of content must be 1*/ .card:hover .card__inner { opacity: 1 ; } /* General property for heading and paragraph*/ .card__inner h 2 { margin-top : 1 rem; } .card__inner p { overflow-y: scroll ; height : 87% ; padding-right : 1 rem; font-weight : 200 ; line-height : 2.5 rem; margin-top : 1.5 rem; } </style> |
Complete Code: In this section, we will combined the above two sections of code.
HTML
<!DOCTYPE html> < html > < head > < style type = "text/css" > /* Assigning general property to card */ .card { position: relative; width: 20rem; height: 30rem; background-size: cover; background-color: black; background-image: url('one.png'); border-radius: 20px; background-position: center; overflow: hidden; } /* Assigning properties to inner content of card */ .card__inner { background-color: rgba(0, 0, 0, 0.9); color: #fff; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1; opacity: 0; padding: 2rem 1.3rem 2rem 2rem; transition: all 0.4s ease 0s; } /* On hovering card opacity of content must be 1*/ .card:hover .card__inner { opacity: 1; } /* General property for heading and paragraph*/ .card__inner h2 { margin-top: 1rem; } .card__inner p { overflow-y: scroll; height: 87%; padding-right: 1rem; font-weight: 200; line-height: 2.5rem; margin-top: 1.5rem; } </ style > </ head > < body > <!-- div with class which will act as a container for us --> < div class = "card" > <!-- Content of card to be display on hovering --> < div class = "card__inner" > < h2 >w3wiki</ h2 > < p > w3wiki: Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. It contains many free and premium contents. w3wiki: Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. It contains many free and premium contents. </ p > </ div > </ div > </ body > </ html > |
Output:
Contact Us