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.

  • Importamos la imagen modelo.
  • Generamos la base de las tarjetas
  • Damos diseño al fondo de las tarjetas.
  • Insertamos nuestra imagen
  • Realizamos el efecto sobre la imagen
  • Ajustamos el efecto a tablet y mobile.
  • Probamos todo lo realizado.

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;
}
}

Videos relacionados con tarjeta de perfil animada con elementor en wordpress.

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Armaremos tu pagina web utilizando elementor page builder, para dejar un sitio muy profesional.

1024px WP 48 elementor paso a paso - wordpress - syspa social v1 OPT

🖐️ Tarjeta hexagonal efecto elementor free (truco, Tips and Tricks) wordpress 126 tutorial español.

Veremos como crear tarjetas hexagonales con movimiento y sombra debajo de las mismas, utilizando elementor free en wordpress.

🖐️ Borde animado tarjeta elementor free (truco, Tips and Tricks) wordpress 125 tutorial español.

Aprenderemos como generar un borde animado en tus tarjetas utilizando elementor free o gratis, este es un truco increíble (tips and tricks).

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.