<!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
class
=
"card"
>
<
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
>