💻💡 COMO HACER UNA GALERÍA DE IMÁGENES HTML5 RESPONSIVA | COMO HACER EFECTO OVERLAY

Aprenderemos a crear una galeria adaptable a dispositivos móviles con HTML5 Y CSS3, Además con el asombroso efecto Overlay, que le dará un estilo muy genial a tu web.
👇👇👇Ver más👇👇👇
👨‍💻🎁 Aprende Diseño Web Desde Cero 👉 alexcgdesign.c...
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger....
📌 Links interesantes 📌
▶️ ¿Te gustó el vídeo? Suscribete aquí: www.youtube.co...
▶️Descarga archivos la galería: bit.ly/2W1RHK4
▶️Música para programadores: • 🎧 💻 MÚSICA PARA PROGRA...
🎥 Vídeos que te podrían gustar 🎥
▶️Como hacer que el menú desaparezca al hacer scroll sin plugins con js : • Como hacer que el menú...
▶️Como crear un Slideshow con Javascript sin plugin : • Como crear un Slider c...
▶️Crea una tabla de precios adaptable a dispositivos móviles: • Crea una tabla de prec...
✉️ Redes sociales ✉️
▶️Facebook: goo.gl/7o77tx
▶️Linkedin: goo.gl/byCJnS
▶️Github: github.com/Ale...
#GaleriaDeImagenes #Flexbox #DiseñoWeb
Tags:
Como crear una galeria de imagenes responsive | Galeria de imagenes en flexbox | Crea una Galeria de Imagenes

[@AlexCGDesign]

Descarga el proyecto: bit.ly/2W1RHK4

[@FaqDev]

Gracias alex, eres el unico que no pone en el medio de todo anuncios y va directo al grano , un gran saludo y gracias por tu aporte.

[@bluefutbol1515]

Después de 4 años vuelvo a ver este vídeo y me salvaste la vida gracias Alex

[@ericksonnav9513]

Gracias por compartir sus conocimientos. Me fue de gran ayuda este video, y ademas usted explica muy bien.

[@Marfelcomputer]

Genio, gracias por compartir tu conocimiento, recien comienzo a desarrollar con lo poco que aprendimos en la universidad al respecto y todo esto ayuda un monton, inclusive tus otros tutoriales!! Dios te bendiga!!!

[@SoyBennyy]

Literalmente todos tus videos me explican lo que mi maestra en 2 semestres no me ha explicado, solo me pide hacer las paginas e investigar, sin saber que pedo lo copeo y pego, pero gracias a ti estoy aprendiendo bastante, de verdad muchas gracias-

[@anaortigoza5635]

Muchas gracias!! De verdad me resulto y se ve hermoso en mi pagina web !!

[@DavidGarcia-lw8dq]

Excelente vídeo... Me encantó solo que al final ya no se acomodan las imágenes en pantalla

[@juliocesarsanchez4275]

Muchas gracias, me ayudaste mucho. ❤

[@franjoshii]

De los mejores tutoriales que he visto, gracias amigo!!

[@santiagoyolsantos2027]

gracias compa saludos desde mi bella guatemala...necesitaba una idea para una galeria y me distes una buena idea

[@hansyadielsanchezmora1710]

muy buen proyecto muchas gracias un saludo

[@andreseduardocordovaorella8078]

¡Te ganaste mi suscripción hermano! Excelente contenido, sigue así. 😎

[@heidyolaya9848]

Eres grande Alex sabes mucho

[@frankescobarflores4530]

muchisimas gracias hermano me ayudaste muchisimo

[@facundodtd]

muchas gracias me ayudó a entender unas dudas, seguidor nuevo bro!

[@antoniorandisi3009]

Saludos, Excelente aporte

[@brayanvirula]

Perfecto alex sigue haciendo mas videos asi Saludos¡¡

[@AlexCGDesign]

Gracias Brayan, seguiremos así, saludos! ;)

[@lautaro4943]

gracias!!!!!!!!!!!!!!11

[@FFena-dj4jv]

Muchas gracias

[@jcare07]

Excelente 💪

[@osammaso8954]

Brother, que genial, perfecto :D

[@carithocrack1]

Espectacular ♥

[@RamaPalomeque]

hola amigo , no me estarian apareciendo las imagenes ,pero si el overlay y el texto de suscribirse , que estoy haciendo mal ?

[@JChivan]

Me gusto tu video, estoy suscrito y pregunta. Tienes segunda parte o como le hago para seleccionar una imagen y se expanda al tamaño original de la imagen.

[@AlexCGDesign]

Hola qué tal, tengo algo como esto: kzbin.info/www/bejne/apivi4ydoreBbKc

[@JChivan]

@@AlexCGDesign Vale, muchísimas gracias, veré el video. muy buen servicio. 5 estrellas xD

[@navhy3579]

Crack, te quiero mucho

[@GeorgeGMr-tl1vi]

Tienes un nuevo suscriptor eres un crack brother, solo una pregunta si quisiera dar ese efecto que al dar click sobre la imagen con su hover que ya pusiste para que me salga esa misma imagen pero en pantalla completa tendrás algún vídeo o tutorial donde explique eso ? Sería de mucha ayuda espero haberme dado a entender gracias ✌️.

[@marcosricardomillondiaz628]

Buenisimo video

[@maresmartinezoscaralejandr3419]

Grande tuve que adaptar la idea a lo que tenia pero la verdad explicas muy bien que no me fue difícil implementarlo, gracias

[@fk1994x]

Excelente, crack!

[@puritocodigo784]

Buen video

[@mitubo1970]

Hola, Feliz año y Felices Reyes. ¿Tienes algo similar pero con minmax() y evitar las mediaqueries? Gracias

[@AlexCGDesign]

Hola, qué tal. Lo estaré haciendo próximamente amigo;!

[@josemejias081]

Un saludo a todos, soy nuevo en esto, una pregunta se puede hacer esto a través de una iteración de una colección de imágenes con un each. Gracias de antemano. Saludos

[@esdrasclother5195]

Excelente Bro💪

[@fernandoperez2644]

Buena tigre sos un crack

[@ojota22]

Holaa Alex, gracias x tan buen video, se puede hacer que el overlay lea el alt de la imagen? Y lo muestre

[@elfodesangre1436]

Like al video, me acabo de suscribir, oye una pregunta, como puedo agregar p/e: tu galería a mi pagina web, es decir, que en mi pagina se abra la galería sin que abra otra pestaña, prácticamente en un apartado. Se puede hacer sin frames? tienes algun link con efectos?. Por que quiero meter la galería justo en medio.

[@biocrysisful]

amigo sabes., porque no me reconocenn las imagaenes. las tengo en la misma carpeta y no las muestra

[@juancarlosjuansoliz5216]

Gracias por tu video! Mira, como le hago para copiar esos cogidos y colocarlas a mi pagina actual? Aun no consigo como hacer :/

[@yakelinelondono8992]

excelente video

[@Limonadasedienta]

estuve intentando poner el texto al centro pero no me funciona nose que hacer y puse los codigos correctos que muesstras

[@masna8183]

porque ami el padding no lo reconoce asi como el box-sizing ayuda porfavor

[@waltertirado3314]

Hola, espero me ayudes , al momento de aplicar el efecto overlay en mi pc está al 100% funcional , pero cuando lo veo desde mi celular no aparece el efecto y solo se ven letras . A qué se debe esto o que me faltaría hacer ? Considerando que mi web es responsiva

[@Pachee20]

Buenas amigo, estoy empezando en el mundo de la programación, quería saber si en vez de ese h1 con el suscribirse, puedo poner una etiqueta booton que me abra una ventana modal y ahí colocar algun texto o algo que lleve a más info de la imagen, sería posible??

[@soner4575]

no pas nd si lo hago desde sublime text?

[@NiliLopezG]

Y si en vez de hover quiero dar doble click?

[@miquelactors]

Muchas gracias por tus videos, estoy empezando con esto y me fué muy bien siguiendo tus indicaciones. Una pregunta, ¿Una vez tengo la galeria ok, puedo enlazar cada una de las fotos a otra página...? Si es así como lo hago, prove con href y no me funcionó.

[@AlexCGDesign]

Puedes encerrar el img en un elemento a, saludos Miquel!

[@miquelactors]

@@AlexCGDesign Muchísimas gracias Alex! Funciona perfecto.

[@FranciscoJimenezQuesada]

Hola Alex, sigo tus videos y aplico tus tecnicas y consejos en mis webs, son excelentes, tengo un problema con una galeria que implementando con esta tecnica, no se me despliegan las imagenes de la manera correcta como te quedan en el video, ya revise de arriba a abajo mi codigo y no encuentro nada, sera un plugin para flex-box, instalaste algo especial para este ejemplo?

[@AlexCGDesign]

Que error aparece?

[@FranciscoJimenezQuesada]

@@AlexCGDesign no se ordenan las imagenes como deberian, se mantienen en fila hacia abajo

[@FranciscoJimenezQuesada]

@@AlexCGDesign Problema resuelto!!!! Excelente video!

[@mrimperfect_1]

@@FranciscoJimenezQuesada ¿Cómo lo resolviste?

[@mariasanz3621]

Hola, no encuentrro la carpeta descargable de la que habla

[@breynerordonez9931]

Hola alex , buen video bro engo una pregunta el h2 no me aparece en la pag , dentro de la galeria tengo un section eso afecta algo ?

[@thezad3r]

Muy buen video, pero tengo duda, Se puede realizar eso con Bootstrap 4? me podrias apoyar por favor.

[@maxtorres2420]

Hola no funciona el link de donde lo puedo descargar ?

[@Viruuu]

Necesito ayuda coloco la galería en mi pagina pero al abrir el menú por debajo muestra la galería.

[@AlexCGDesign]

Podrías explicar más tu problema?

[@Viruuu]

​@@AlexCGDesign ya esta gracias era el z-index ya me ayudaste gracias

[@mrimperfect_1]

@@Viruuu ¿Cómo lo resolviste?

[@porfiriobenaventebenique6769]

me jusraria como se realiza una maquetacion para una pagina web, explicar donde va cada cosa cuanto a las medidas, dibujar la maquetacion

[@SenshiNoMei]

No es responsivo, en pantallas de telefono las imagenes se deforma en rectangulos :/

[@elianaborgarelli8562]

Hola! Hice la galería tal cual, pero no me funciona, no se me forman los recuadros. Respasé todo el código pero no encuentro el error. Me podrías ayudar? Gracias

[@nyx4436]

pusiste mal algun nombre de una clase(? revisa bien

[@saulgutierrez2598]

eres la vergaaa jaja buenisimo

[@sakura1184]

Una pregunta, para poner un link en cada imagen como se podria hacer ? lo intente con pero no entra al link Saludos!

[@AlexCGDesign]

Dentro de la etiqueta a, puedes poner una img, saludos

[@mateogomez1830]

y como hago que se abra la iamgen

[@e_fo8017]

Hice eso pasó a paso pero con tres fotos y no funciono...

[@andersongomezgarcia1933]

oye amigo se podria agregar tambien el efecto lightbox con este efecto?

[@AlexCGDesign]

Claro amigo! :)

Manos a la obra, a practicar; pero sin la "música para programadores", mejor en silencio, o con los tucanes; es broma Alex, saludos CDMX.

[@AlexCGDesign]

JAJAJAJA a darle con la playlist de los tucanes, saludos desde México!

[@endersonperez814]

Amigo tengo un problema y es que el hover no permite accionar una funcion jquery cuando le doy click a las imágenes. Tengo un evento listener para las imágenes cuando yo hago click en ellas hace una acción pero cuando pongo el hover esta me impide hacer click en las imágenes. Como hago para que el hover se visualize pero que me permite hacer click en las imagenes y ejecutar mi función jquery No se si entiendas.

[@AlexCGDesign]

Si el hover se suporpone, podrías poner el listener para el hover, y ya! Sería un gran hack jajajaja saludos

[@endersonperez814]

@@AlexCGDesign Tendras algun correo de contacto? Por fa, para contarte un poco mas. Lo que pasa es que mi hover se encuentra en otro div no en el que tengo referenciada la imagen. Logre la acción del hover pero no me devuelve la imagen. Me sale rota :(

[@AlexCGDesign]

@@endersonperez814 [e-mail]

[@endersonperez814]

@@AlexCGDesign Gracias! Ya te mande un correo.

[@paulperez1991]

No me saleeee ayuda :c

[@icemdjre2914]

la galeria es con flexbox ?

[@AlexCGDesign]

Sí amigo, la galería es con flexbox, saludos!

[@astridarias7891]

no se mira joven como le hago🙂

[@bertranbenitez9188]

que tal como contacto contigo?

[@AlexCGDesign]

[e-mail] ahí está mi correo

[@bertranbenitez9188]

@@AlexCGDesign te escribo