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 >GeeksforGeeks</ h2 >
< p >
A Computer Science portal for
geeks. 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 >GeeksforGeeks</ h2 >
< p >
GeeksforGeeks: Computer Science portal
for geeks. It contains well written,
well thought and well explained
computer science and programming
articles, quizzes etc. It contains many
free and premium contents.
GeeksforGeeks: Computer Science portal
for geeks. 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: