Tarjetas de perfil animadas con Elementor

Tarjetas de perfil animadas con Elementor

Compartir en facebook
Facebook
Compartir en linkedin
LinkedIn
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter

En este post iremos explicando una serie de ejemplo para crear tarjetas de perfil de usuarios y las crearemos con Elementor.

Índice de contenidos

Tarjeta de perfil ejemplo 1

Para crear la estructura de la tarjeta revisa el vídeo que encontrarás a continuación. Recuerda definir la clases a los elementos de la tarjeta tal y como explicamos en el vídeo que encontrarás a continuación.

Lo siguiente, aplicar el código css en el css adicional de los ajustes de la página.

Tarjeta de perfil ejemplo 2

Para crear la estructura de la tarjeta revisa el vídeo que encontrarás a continuación. Recuerda definir la clases a los elementos de la tarjeta tal y como explicamos en el vídeo que encontrarás a continuación.

Lo siguiente, aplicar el código css en el css adicional de los ajustes de la página.

				
					.nombre{
    opacity:0;
     transition-duration: 2s;
}
.redes{
    opacity:0;
     transition-duration: 2s;
}
.imagen:hover .nombre{
   opacity:1;
   transition-duration: 2s;
}

.imagen:hover .redes{
    opacity:1;
     transition-duration: 2s;
}

				
			

Tarjeta animadas con sombra de caja

Para esta animación de tarjeta nos vamos a necesitar ningún código personalizado por lo que para seguir los pasos revisa el siguiente video.

Tarjeta desplegables

Para crear la estructura de la tarjeta revisa el vídeo que encontrarás a continuación. Recuerda definir la clases a los elementos de la tarjeta tal y como explicamos en el vídeo que encontrarás a continuación.

Lo siguiente, aplicar el código css en el css adicional de los ajustes de la página.

				
					selector{
    height: 295px;
    transition: all 0.5s ease-in-out !important;
}
selector:hover{
    height: 510px;
}
.content-text{
    display: none;
}
selector:hover .content-text{
    margin-top: unset !important;
    display: block;
     -webkit-animation: fadeIn 1.5s;
  -moz-animation: fadeIn 1.5s;
  -o-animation: fadeIn 1.5s;
  -ms-animation: fadeIn 1.5s;
}


				
			

Tarjetas 3D animadas

Sigue los pasos del vídeo que encontrarás a continuación.

				
					selector img {
  /* adjust the below to control the 3D effect */
  --x: 10px;
  --y: 20px;
  transform: perspective(1000px) rotateX(var(--_a,40deg));
  /* */
  clip-path: polygon(       
     var(--y)              var(--y),       
     calc(100% - var(--y)) var(--y),       
     calc(100% - var(--y)) calc(100% - var(--y)),       
     calc(100% - var(--y) - var(--x)) var(--_c,100%),       
     calc(var(--x) + var(--y))        var(--_c,100%),      
     var(--y)        calc(100% - var(--y))       
     );
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding: var(--y) var(--y) 0 var(--y);
  transition: 1s;
}
.box:hover img {
  --_a: 0deg;
  --_c: calc(100% - var(--y));
}



.titulo{
    opacity: 0;
     transition: 1s linear;
}
.box:hover .titulo{
    opacity: 1;
    transition: 1s linear;
}

				
			

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita
Compartir en facebook
Facebook
Compartir en linkedin
LinkedIn
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter

Deja un comentario

Tu dirección de correo electrónico no será publicada.

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba