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:
Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.
¡Nos vemos dentro!
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:
Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.
¡Nos vemos dentro!
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).
Este artículo ha sido visitado: 8 veces
Obtén acceso a los secretos mejor guardados de WordPress con solo un clic
Suscríbete a la newsletter y recibe en tu correo electrónico 10 snippets de código exclusivos que nunca se han publicado en nuestra membresía y que nunca se publicarán.
Obtén la ventaja definitiva en WordPress y conviértete en un experto.
10 códigos para WordPress, Divi y WooCommerce, que nunca han sido publicados aquí, ni se publicarán
Deja que WordPress trabaje por ti, utiliza código.