🎥 Cómo ANIMAR Imágenes con CSS (Galería CSS GRID ANIMADA)

Подписаться 124 тыс.

Просмотров 16 тыс.

50% 1

🎳 APRENDE como CREAR una GALERÍA DE IMAGENES con CSS GRID Responsive, agregando un EFECTO OVERLAY a LAS IMAGENES. 👇
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger.com/alexcg
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
-----------------------------------------------------------------------------------------------------------------------------
Aprende CSS (Desde CERO en RU-vid) 👉 • 🚀 Curso CSS PARA PRINC...
-----------------------------------------------------------------------------------------------------------------------------
CURSOS COMPLETOS:
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
👨‍💻🎁 Diseño Web Desde Cero (Descuento) 👉 alexcgdesign.com/descuento-di...
-----------------------------------------------------------------------------------------------------------------------------
02:10 Creando HTML para la Galería de Imágenes con CSS GRID
06:03 Agregando estilos a la galería de imágenes con CSS
08:55 Creando la GRID para la galería de IMAGENES
13:27 Animando las imágenes con CSS
15:40 Terminando el efecto Overlay CSS
17:23 Adaptando la galería de imágenes con CSS GRID AREAS
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesign.com/blog
Twitter: / alexcgdesign
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Instagram: / alexcg_design
Github: github.com/AlexCGDesign

Наука

Опубликовано:

31 окт 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@AlexCGDesign 2 года назад

📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss

@davidolivero3977 2 года назад

Eres un maquina AlexCg! de verdad tus videos siempre son de los mejores

@cristianyunez5031 2 года назад

Eres un Crack Alex, el que mejor sabe enseñar, píldoras de sabiduría!

@AlexCGDesign 2 года назад

Gracias Cristian:), un saludo!

@josemartinezflorez5230 2 года назад

muy profecional mis respetos👍

@jonathantignino4559 2 года назад

Sos muy dinámico para explicar, muy buenos tus videos! Te felicito!

@Deus-lo-Vuilt 2 года назад

Gracias por este video , ojalá más videos de Css

@federicorivero 2 года назад

Muy bueno!!

@julianvelez6563 2 года назад

Que crack alex

@AlexCGDesign 2 года назад

Gracias Julian, un saludo!

@julianvelez6563 2 года назад

@@AlexCGDesign un saludo alex

@martinflores9611 2 года назад

muy muy buenooooooo

@EzKuLaKa Год назад

Hola, veo y veo este video y no me canso de ello....Alguno podria decirme como seria si antes del overlay, las imagenes de la izquierda tuvieran un efecto de entrada de izquierda a derecha e igualmente con las imagenes de la derecha ? .... Gracias de antemano

@seba6471 Год назад

Gracias me fue de mucha ayuda el video, consulta ¿como hago para que en cada imaggen pueda poner un texto diferente, en vez de que en todas se vea "hola mundo"?

@johanhenao8227 Год назад

como hacer para que cada img tenga su nombre propio, es decir que en el contenido no solamente sea el hola mundo?

@RicardoTorres-wv4zw Год назад

Hola, lograste saber como se hace eso?

@christianacosta3785 2 года назад

Excelente video!!!, cada vez mejor CSS grid, tengo una duda, como se cambiara el texto del overlay para que sea un texto diferente al pasar por cada img?

@seba6471 Год назад

pudiste resolverlo? quiero hacer lo mismo

@christianacosta3785 Год назад

Si, lo hice cambiando el content de cada elemento before de los div

@christianacosta3785 Год назад

Pero tienes que agregar una clase diferente a cada grid, para que te funcione, ya que en el ejemplo, pues utiliza una clase general, saludos.

@DanielBallester21 2 года назад

Buenisimos todos tus videos, de a poco siempre aprendo más. Pregunta: Recomiendas usar JavaScript para hacer animaciones?? o es mejor hacerlo todo con CSS ?? gracias!! yo me refiero para no tener problemas de velocidad del sitio.

@jeffersonquispeperlacios2560 2 года назад

Primero Alex

@AlexCGDesign 2 года назад

Hola Jefferson, como estás? Un saludo

@Wendilumustainesixtos18 2 года назад

hola! el mensaje de content lo quiero poner diferente a cada imagen?

@seba6471 Год назад

pudiste resolverlo? quiero hacer lo mismo

@florenciarojas7431 Год назад

@@seba6471 tienen que hacerlo individualmente: .gallery_picture-g1::before{... así por cada g1, g2, g3, etc

@MatiasRey8611 2 года назад

Cómo clonaste los códigos sin escribir ?

@carlesinglada923 2 года назад

Hola Alex. Felicidades por tu canal. En este video veo que el código que hay en el minuto 20:17 no es el mismo que había antes. ¿A qué es debido? Saludos!

@AlexCGDesign 2 года назад

Hola Carles, perdón lo que pasa es que empece a grabar todo seguido y en un punto se corto, y tuve que empezar desde donde se corto, pero me parece que solo se cambio el orden pero todo el código sigue siendo el mismo, quedo al pendiente:)

@carlesinglada923 2 года назад

@@AlexCGDesign Creo que sí, solo ha cambiado el orden. Lo que había en el .gallery__picture:hover::before pasa a estar en el .gallery__picture::before y lo del .gallery__picture::before.al .gallery__picture:hover::before. Pero el video está muy bien explicado. Felicidades!