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 con fondo animado para Elementor free
Sigue los pasos del vídeo que encontrarás a continuación. Para obtener los CSS haz click aquí.
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;
}
