En una página web, crear elementos ocultos que se revelan puede ser una gran forma de añadir información extra a la vez que le das una experiencia expandida al usuario. Estos elementos agregan interacción y movimiento a aspectos relevantes de tu página web. Por ello, en este post, te enseñaremos cómo crear y revelar una tarjeta con CSS.
¿Qué queremos hacer?
Lo que pretendemos hacer en este post es crear una tarjeta de información que se revele al pasar el ratón sobre su icono. Revelar una tarjeta con CSS es un recurso muy utilizado en el diseño web para dar consejos o pedazos de información extra sin ocupar espacio constante en la página web.
Nuestra tarjeta de información tendrá un título y un párrafo, pero tú puedes insertar los elementos que quieras. El icono de esta tarjeta será el típico círculo con la letra i en el medio, pues representa fácilmente un lugar con información. Recuerda que usar iconos conocidos ayuda al navegante a tener una experiencia de usuario más sencilla, pues sabe exactamente qué hacer.
¿Cómo revelar una tarjeta con CSS?
Antes de revelar una tarjeta con CSS, debemos crearla en nuestro documento HTML. Para ello, te aconsejamos crear dos div, uno contenido dentro del otro. El div padre nos servirá como contenedor. El div hijo será la tarjeta y en él insertaremos dos elementos: un elemento h1 y un elemento p. A este elemento le hemos dado el atributo de clase .inner.
Como características básicas de su diseño, le hemos dado las propiedades background-color, width, padding, border-radius y font-family. Además, hemos determinado que sus contenidos estén centrados usando el sistema de posicionamiento CSS Grid.
Para revelar una tarjeta con CSS podemos hacer que se modifique su propiedad clip-path. Recuerda que esta propiedad nos permite generar un recorte en un elemento, haciendo que solo una sección de este sea visible. Entonces, podemos hacer que este recorte pase de ser una sección pequeña a ocupar el total del elemento, generando el efecto de revelado. Para hacer que esto suceda cuando el ratón pase por encima de nuestra tarjeta, basta con usar la pseudoclase :hover. Esto puede ser un paso muy brusco, por lo que podemos agregar una transición al elemento .inner.
A continuación, te demostramos cómo escribiríamos estas propiedades, omitiendo las propiedades de diseño:
.inner {
clip-path: circle (10% at 90% 14%);
transition: clip-path .5s ease-in-out;
}
.inner :hover {
clip-path:circle (75%)
}
Ahora, para hacer que nuestro círculo de recorte sea el icono de información, deberemos agregarle una letra i y cambiar su color de fondo a azul. Sin embargo, como este icono es una sección de la misma tarjeta, deberemos usar la pseudoclase :hover para cambiar sus características una vez se abra. Para controlar las características y ubicación de la i hemos decidido usar un elemento span, añadido a nuestro elemento div “inner”.
A continuación, verás las líneas de código finales:
.inner {
background-color: blue;
width: 25opx;
padding: 1rem;
border-radius: 10px;
cursor: pointer; /* define el cursor del elemento */
clip-path: circle (10% at 90% 14%);
transition: all .5s ease-in-out;
}
.inner:hover {
clip-path: circle (75%);
background-color: blanchedalmond /* cambia el color de la tarjeta cuando se revela */
}
/* controla la i cuando está visible */
.inner span {
color: white;
float: right;
font-size: 2rem;
font-weight: bold;
font-family: ‘Times New Roman’;
margin-right: 3%;
transition: opacity .5s ease-in-out;
}
/* hace que la i desaparezca al pasar el ratón */
.inner :hover span {
opacity: 0;
}
¿Qué sigue?
Ahora que sabes cómo revelar una tarjeta con CSS, estás a un paso de crear tus propias animaciones y ser un experto en esta área del diseño web. En KeepCoding sabemos que tu sueño es ser un desarrollador profesional, con conocimientos en muchas áreas. Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡No lo dudes más e inscríbete!
