WORDPRESS
Tarjeta de perfil animada con elementor (truco, Tips and Tricks, wordpress 128 tutorial español
En este tutorial de SYSPA SOCIAL aprenderemos como crear una tarjeta animada en elementor, donde el personaje se moverá y crecerá cuando nuestro cursor se encuentre sobre nuestra tarjeta en wordpress.
Las tarjetas de perfiles son algo muy utilizado y sinceramente porque no podemos pensar en que estas tarjetas sean de productos, por lo cual puedes aplicarlas a lo que desees.
Lo importante en este caso es que, además de ser fácil, podrás generar un efecto increíble donde la imagen principal se correrá y crecerá cuando tu cursor pase por sobre estas tarjetas, además, el texto descriptivo aparecerá mágicamente.
Logicamente, el resultado es genial, es realmente profesional y por lo tanto le dara un estilo elegante a tu web.
Principales puntos del tutorial tarjeta de perfil animada con elementor en wordpress.
Código Utilizado
Movimiento y Scalamiento de la imagen + Ocultar y Mostrar Texto
<style>
/*Image Positioning CSS*/
.columna .elementor-widget-image{
position: absolute;
bottom: 0;
left: 0%;
}
.columna .elementor-widget-image, .columna .elementor-widget-image img{
transition: 0.5s ease-in-out;
}
/*Image Move on Hover*/
.columna:hover .elementor-widget-image{
left: 40%;
}
/*Image Size On Hover*/
.columna:hover .elementor-widget-image img{
width: 450px;
}
/*Hide Content Initially*/
.contenido{
opacity: 0;
transition: 1s ease-in-out;
}
/*Show Content on Hover*/
.columna:hover .contenido{
opacity: 1;
}
</style>
Ajuste para tablets.
/*Tablet Device CSS*/
@media (max-width: 1024px){
.columna:hover .elementor-widget-image img{
width: 280px;
}
}
Ajuste para celulares.
/*Mobile Device CSS*/
@media (max-width: 767px){
.contenido{
opacity: 1;
}
.columna .elementor-widget-image{
position: unset;
}
/*Adjust Mobile Image Width from Here*/
.columna .elementor-widget-image img{
width: 200px !important;
}
}
Tenemos Cientos de tutoriales Wordrpess
Inicia aquí gratis !
Accede al listado completo de tutoriales wordpress.