En este artículo, veremos cómo podemos crear una tarjeta que muestre contenido al pasar el mouse usando la propiedad hover usando HTML y CSS.
Código HTML: En esta sección crearemos la estructura de nuestra tarjeta HTML.
- Cree un «div» con el nombre de clase «tarjeta».
- Cree otro «div» dentro del «div» principal con el nombre de clase «card__inner».
- Agregue el encabezado «h2» y el párrafo dentro del segundo «div» con contenido aleatorio.
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>
Código CSS: En esta sección, asignaremos propiedades generales al elemento usando CSS.
CSS
<style>
/* 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 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>
Código completo: en esta sección, combinaremos las dos secciones de código anteriores.
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 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA