WORDPRESS

tarjeta animada con marco, elementor efecto, wordpress 165, tutorial español

En SYSPA aprenderemos como crear una tarjeta animada con marco, utilizando elementor para tu pagina o sitio web wordpress.

Quienes conocen mi canal saben que me gusta regalarles estas animaciones o efectos para elementor que les permitirán crear paginas de calidad.

Sin necesidad de conocimiento previo, de manera muy fácil y rápida, crea estas impresionantes tarjetas que tendrán animaciones cuando pases el cursor encima, en este caso tendrán recuadros con textos.

Te dejo todo el material listo para que las pruebes, no te lo podes perder adelante!

Principales puntos del tutorial wordpress tarjeta animada con marco.

  • Creamos una pagina
  • Establecemos el fondo
  • Creamos la tarjeta
  • Insertamos el contenido de la tarjeta
  • Creamos el efecto necesario

Videos relacionados con wordpress tarjeta animada con marco.

🖐️ Efectos y animaciones elementor MAS DE 2 hs, wordpress 138 tutorial español.

En este video de elementor les dejo mas de 2 hs de animaciones y efectos que serán geniales para tu pagina web wordpress. wordpress.

1024px WP 138 WEBP efectos y animaciones elementor 2 horas wordpress syspa v1

🖐️ Diseñar o crear pagina web completa paso a paso para principiantes, wordpress 3 tutorial español.

Diseñamos y creamos una pagina web completa, paso a paso, explicación para principiantes que te mostrara todos los puntos de manera detallada.

1024px WP 3 diseñar pagina web paso a paso desde cero - wordpress - syspa social

🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.

1024px WP 35 mejor hosting wordpress sered - syspa

Principales puntos del tutorial modelo pagina web wordpress.

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.

1024px WP 48 elementor paso a paso - wordpress - syspa social v1 OPT
Descargar Imágenes tarjetas

Código Utilizado

Movimiento y Scalamiento de la imagen + Ocultar y Mostrar Texto

<style>
.tarjetarecuadro {
--border-color: rgba(255,255,255,0.5);
--border-size: 10px;
}
.tarjetarecuadro{
width: 90%;
height: 90%;
position: absolute;
top: 5%;
left: 5%;
}
.tarjetarecuadro:after, .tarjetarecuadro:before{
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: all .5s ease-in-out 0s;
}
.tarjetarecuadro:before{
border-bottom: var(--border-size) double var(--border-color);
border-top: var(--border-size) double var(--border-color);
transform: scale(0, 1);
transform-origin: 0 0 0;
}
.tarjetarecuadro:after{
border-left: var(--border-size) double var(--border-color);
border-right: var(--border-size) double var(--border-color);
transform: scale(0, 1);
transform-origin: 100% 0 0;
}
.tarjetarecuadro:hover:before, .tarjetarecuadro:hover:after{
opacity: 1;
transform: scale(1);
transition-delay: .15s;
}
.tarjetarecuadro h2{
opacity: 0;
transform: translate3d(0, -50px, 0);
transition: 1s ease 0s;
}
.tarjetarecuadro:hover h2{
opacity: 1;
transform: translate3d(0, 0, 0);
}
.tarjetarecuadro h6{
opacity: 0;
transform: translate3d(0, 50px, 0);
transition: 1s ease 0s;
}
.tarjetarecuadro:hover h6{
opacity: 1;
transform: translate3d(0, 0, 0);
}
</style>
suscribete syspa

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.

Tutoriales WordPress