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:

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:

El resultado es el siguiente:

 

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 descripción).