Flip Card con CSS

Tiempo estimado de lectura: 3 minutos

 

Cómo crear un efecto Flip Card para tu web

Esta semana aprenderemos a crear un efecto flip card para las imágenes de nuestros WordPress. Este artículo complemente el de la semana pasada donde aprendimos a voltear una imagen.

Hacer un efecto de rotación 3d en una imagen

Utilizando las propiedades de transformación y de rotación, podemos crear el efecto tan usado de una imagen que se gira y muestra un texto cuando pasamos el cursor sobre ella.

El código CSS utilizado es el siguiente:

/* Establecemos el ancho y la altura como deseemos, elimina la perspectiva si no deseas el efecto 3D */
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Borra esta línea si no quieres el efecto 3D */
}
/* Este contenedor es necesario para colocar el anverso y el reverso */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Hace un giro horizontal cuando muevas el ratón sobre el contenedor de la caja */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Coloca el anverso y el reverso */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Estilos de la parte trasera (alternativa por si falta la imagen) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Estilos de la parte trasera */
.flip-card-back {
background-color: #000;
color: white;
transform: rotateY(180deg);
}

Como puedes ver, cada bloque de programación está comentado con lo que hace dicho bloque y los cambios que puedes hacer tú mismo.

Y ahora el código HTML que debemos escribir para insertar la imagen:

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/08/imagen-cuadrada-300x300.jpg" alt="Imagen de ejemplo" style="width:300px;height:200px">
</div>
<div class="flip-card-back">
<h1>Título del efecto</h1>
<p>Subtítulo</p>
<p>Texto del contenido para el efecto</p>
</div>
</div>
</div>

El resultado es el siguiente:

Avatar

 

Título del efecto

Subtítulo

Contenido del efecto

 

Como puedes ver es una opción muy vistosa y muy utilizada para los apartados de Nuestro equipo, ya que en la misma imagen podemos poner la propia imagen y los textos descriptivos de la misma (nombre y apellidos, cargo en la empresa y una pequeña descipción).


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *