¡Crea una INCREÍBLE la galería de imágenes para tu WEB!

Usando un poco de HTML y CSS puedes crear una galería de imágenes visualmente impactante. Sin necesidad de JavaScript y con un rendimiento óptimo.
#shorts

[@TujaBsks]

para los vagos, el css: section{ display: flex; width: 600px; height: 430px; } section img{ width: 0px; flex-grow: 1; object-fit: cover; opacity: .8; transition: .5s ease; } section img:hover{ cursor: crosshair; width: 300px; opacity: 1; filter: contrast(120%); }

[@neofantasticeodum6411]

T mamo el kulo Xd

[@omardariovalderramaalbarra9607]

kzbin.info/www/bejne/rnWno4mMecqNmqM

[@woodenpluto654]

Te amo

[@tonydetective5743]

Soy muy nuevo pero para que es ese tacataca

[@Xardimods]

​@@tonydetective5743Galería de imagenes con animación sin necesidad de Javascript.

[@salvadormellado5200]

La verdad es que esta increíble hacerla en tan poco tiempo

[@user-hn2gy3ex1i]

tengo un par de semanas aprendiendo HTML y CSS y aun apesto,,,Pero tu eres un super Crack. Tomaré esto como un ejemplo para mi proximo portafolio. Gracias!!

[@animatek6155]

Eres el mejor canal sobre programación en español sin ninguna duda, aprendo cosas más útiles contigo que en el ciclo de DAW que estoy haciendo. Gracias!!!🙏🏻

[@dromdev]

Amigo me has ayudado en muchas cosas, eres increíble

[@OneGuitarTabs]

Excelente Midu, lo acabo de implementar!! Mil gracias!!

[@midudev]

🔥🔥🔥 geniaaaaal!

[@gabriela.vanesa.neira.paredes]

Gracias porque quería crear página en visual code studio

[@arielrodriguez3440]

Me fue de mucha ayuda

[@vampgala]

excelente!!! gracias

[@user-pt9eh2cz9b]

Muy bonito pero creo que no sirve mucho ya que al colocar en la web queda totalmente desubicado! No se puede centrar

[@Jose_0927]

tienes que jugar con el css para que quede centrado

[@erickp6701]

Perfecto Midu!!

[@vozcomotrompeta]

Excelente aporte!

[@RankXer]

¡¡Muy bueno!!, tengo que investigar lo de "filter" en CSS, a ver que tipos hay. Si le añades en el :hover rotate 360º..puede salir algo llamativo, la imagen girará al pasar el mouse además de esa "ampliación" en la img.. Saludos, tiene muy buenos tutoriales.

[@minepixel8273]

Gracias por enseñarnos :)

[@adolfoenriquelopezescriban5887]

eres un máquina, muchas gracias

[@bullish7082]

Gracias :) buen efecto

[@martin3862]

Excelente tip!

[@Aldaaah]

¿En dónde consiguen las imágenes?

[@bryantamayo1202]

Super excelente!

[@pablolancho6278]

Muuuuy bueno!!!

[@ebesquin]

Excelente !!!

[@ismaelmendez2441]

muy bueno muchas gracias

[@Kuki4982]

Duda, hay alguna forma en CSS de que la galería en vez de la imagen se muestre con hover, que se quede mostrando despues de hacerle click? En hover va muy rápido y en active, me obliga a mantener presionado el botón de click del mouse para poder verlo :'3

[@Messicomoleo]

gracias midu

[@steveUX]

Siempre lo he dicho, genio!

[@josemanuelgarciarodriguez9223]

Buenisimo

[@marcoantonioriossandoval6825]

muy similar a el primer projecto de 50 retos en 50 dias. peor este muy rapido y sencillo . muchas gracias.

[@antonytorreslopez8025]

como podria hacer eso pero con tailwind?

[@EdgarMiranda-bg5rf]

Señor de las animaciones te amo

[@manuel_mzt]

Eres un crack

[@aincatoni]

Estas bueno para el css, siempre me suelo encontrar con programadores que odian los estilos, pero no es tu caso, buen tip, agradecido!

[@midudev]

Un placer, Ain! Ojalá os ayude! :)

[@Deus-lo-Vuilt]

Más videos así , un acordeón o un slider 😎😎

[@francobiason]

Como le puedo incorporar un a cada card?

[@scrappasoapaso]

¿Me podríais decir dónde se coloca el htlm?Gracias.

[@rodolfomb7622]

eso se podría hacer con imágenes y videos? poniendo imagen luego vídeo y luego otra imágen?

[@josedavidmosquera2274]

Súper ....

[@daianagamer4035]

Puse mi galeria en el header pero en la pagina esta centrado con mucho borde a los costados. Como hago que ocupe el encabezado de punta a punta?

[@romariohuacarpumaaparicio5234]

gracias compa }

[@nosequehacer8962]

Y como seria el mismo efecto pero con las separaciones en diagonal

[@lirivox5702]

gracias, pero nose si puedas enseñarnos como ponerle los links, por que al momento de agregar el "a" se borra las imagenes

[@gilbertoestrada2124]

no sé, pero a mi me funciono el siguiente codigo en css: .carrusel { display: flex; width: 100%; height: 100%; } .carrusel img { width: 93%; height: 93%; flex-grow: 1; object-fit: cover; opacity: 0.8; transition: 0.7s ease; } .carrusel img:hover { width: 100%; height: 100%; opacity: 1; filter: contrast(120%); object-fit: cover; } si algo esta mal por favor digan xd que recien voy aprendiendo, pero tengo entendido que al poner 0px en el segundo parrafo es que se ocultan las imagenes

[@cc_gumball212]

Gracias

[@juanemilioortega-risso4570]

Que recomiendan para ver eso desde el celular?

[@lucianamunoz9431]

Más despacio que llevo una toalla diría Homero

[@JuanSuarez-my2ee]

Quiero hacer que las imagenes queden en el centro como podria hacerlo?

[@sergiobenavides1167]

bro como puedo generar esto para shopiffy en que parte debo pegar el codigo?

[@pau5004]

como puedo hacer para centrarla? estuve intentandolo un monton pero no me deja

[@tadeoramos6195]

Como hago para centrar todo y hacerlo mas pequeño😢

[@starlord8998]

y para dalre click a una imagen como seria ? (excelente video!!!!)

[@_JmGamer1199_]

Como hago para que se vea bien en moviles? Soy nuevo en esto de hacer paginas con css y estas cosas raras xd y ns como hacer nada

[@herreranicoo25]

@midudev Gracias!! Me podrias indicar como seria si deseo agregar un link para que la imagen redireccione a otra pagina de mi web? #ayuda

[@lirivox5702]

exacto, desaparecen cuando intento ponerlas también

[@user-gq5qo3zh4y]

😱 detrás de cámaras

[@relykan]

Se puede escribir dentro de las imagenes?

[@lopeznoluisluiswonk3088]

hay alguna forma de que esas imagenes se vuelvan enlaces a otras paginas?

[@user-sv5lg7gx5g]

Gracias midudev

[@francogilcomesana4320]

Cómo hacerla responsive?

[@richardcanete3160]

Supongo que cambiando la orientación a flex-direction column

[@xxala01_yt15]

seria tonto hacerla responsive porque no es lo mismo un mouse que como funciona el click de celular, de ultima en el diseño responsive le implementas un carrusel.

[@dromdev]

Amigos saben porque en móvil es tan lento la animación de las imágenes????

[@ElJoxs1708]

Buen videooo, pero tengo una duda como les puedo poner un link a cada imagen para que me lleve a otra sección de la misma página!!??

[@einsvergh]

href pero no es recomendable dentro de un scrol o una imagen pero pruebalo y seria mejor que lo hagas con javascript mas sencillo :)

[@GloriaGarcia-xl9bf]

Necesito otro de galerías por fis

[@ezequielbernuchi8808]

Sirve para google sites?

[@SerialdesignacionM-iu4tj]

como encuento el sitio web es que no me sale

[@erickgiber]

Que crack

[@meibysbby]

Bro como una pregunta le puedo agregar texto a las imágenes teniendo esa misma animación alguien que me ayude porfaaaaa

[@SpiritLine]

funciona con cards?

[@francescorotondaro4044]

como se centra???? en la pag

[@brigadasgrifo]

impresionante, simplificado. Que genio!

[@mendozasoloriojuancarlos7367]

Cómo puedo hacer eso en Dreamweaver

[@ivanwar1451]

Oie alguien me podría decir cómo poder centrar esta galería en el centro de la página

[@serxa8731]

no me funciona el , no aparecen las imagenes

[@jhoancampo5093]

se ve genial, de donde sacaste las imagenes?

[@CDRMarketingDigital]

como se coloca ese código en Elementor? :

[@marianazoecarmonaayala9668]

se podrán poner hipervínculos en las imágenes??

[@creepy0_04]

No funcionan los hipervinculos :(

[@user-fe2nf5kz3g]

pero com puedo añadir un link a las imagenes sin que me jode todo esto

[@diegoandressibajatilano2397]

Me pueden ayudar las imágenes me quedaron muy grandes

[@SebastianJaramillo-xl9xi]

¿Cómo lo puedo centrar?

[@LTKGreedCorp]

Me ha salido pero ahora me falta centrarlo jajaja, no puedo

[@LopMugi5656]

1:00

[@MartinGonzalez-nd9zg]

No me sale, parece q no puede ser cualquier img

[@TujaBsks]

wtf increíble tío

[@midudev]

Gracias, Robert!!!

[@CarlosLopez-gn5ur]

y si queremos agregarle "links" a las imágenes ? Si le pones un la imagen ya no sale en el "carrusel"

[@lirivox5702]

si ps, chhale :c, sin solucion

[@marianobarella3191]

No, porque en ese caso el contenedor de la imagen ya no es el section, sino cada enlace en particular. Podrías probar dandole un width y height de 100% a cada img, y un object fit cover para que aparezcan.

[@Alex-ni6ed]

Podrías hacerlo con un evento de click con JS y listo.

[@eduardogamer4479]

alguien me puede ayudar las imagenes me salen de lado y no centrados

[@santiagobetancur3951]

Oye porque cuando estas dentro de la imagen hace una pequeño zoom? es por el tamaño de la imagen o algo?

[@marcoantonioriossandoval6825]

es por el tipo de transicion que se uso en este caso ''ease'

[@marcoantonioriossandoval6825]

bro, discupa pense que era por la transiicon, pero ya me di cuenta con otro porjecto que no es eso si no es por el object fit. como es cover y la medida del la imagen aumenta con el hover. la image debe de ajustar a esta nueva medida. puedes checarlo elimina el cover y veras que pasa.

[@obedauditore2355]

Y si quiero agregar un video?

[@exeio1385]

Y como hago para que cuando presione me dirija a otra imagen??

[@jonathanarisaca2382]

solo pones aqui dentro pones el codigo de la imagen y listo

[@ice.955]

Por que no me deja moverle a la izquierda para poder centrarla?

[@joseiniesta5272]

Agregale un entre la section y ya estaria

[@jignchuan3154]

como se pudiera hacer que cada imagen muestre un boton en el centro en el bottom de la imagen asi poder linkear otra pagina o cualquier cosa? quien me da ideas

[@marianobarella3191]

Podes probar con "::after", para que aparezca ese contenido dentro de la imagen.

[@dannasofiaguerrero]

Hola lo intente pero no funciono

[@zoid823]

Lo hice tal cual lo pones en el video y salen las imagenes pero no la animación xd

[@abeleduardo6092]

Y para mobile ?

[@manina7756]

Por favor como se hace responsive

[@sebastiansiman6076]

el section ponle en porcentaje 100% tanto width como heigth 100vh, luego quedarían detalles según un div padre etc

[@hectorab4026]

yo quiero que la galeria se pueda ver cuando se le de clic a un boton

[@santiagomejia6758]

Cómo lo centro 😢

[@vladimirlemus5663]

Alguien que sepa centrar el section porfa jeje

[@marianobarella3191]

Si al body o contenedor del section le das un display flex, justify content center y align items center, vas a centrarlo.

[@lightningfast6378]

00:00

[@rafajoe778]

Yo lo hice igual, pero no me hacen ninguna transición las imágenes

[@midudev]

Entonces igual igual no será. :D

[@rafajoe778]

@@midudev Lo he comprobado mil veces ya...

[@josecarlosoliva192]

a ti te queda mas chulo xD

[@briantorres3255]

Por que me sale recomendado esto? Y yo flipando con ctrl+c y ctrl+v. XD

[@angelabrigo885]

no me sale igual :c

[@alexanderv.t.9185]

recuerda colocar y al css

[@user-cq9dk2my8y]

Como lo muevo al medio

[@anthonygaelmayol5197]

Si me sale puedo subir a mis historias pero avisando que te lo copié a ti el ejemplo? Jajajaja

[@midudev]

Claro, no hay problema.

[@Gabriel-ys9zq]

me sale un espacio en blanco entre las imagenes

[@dianissalazar3875]

display: inline-block; margin: 0; con esto se acomoda

[@pinedaplus6438]

Ya me perdí.

[@JacRomeo]

Contigo sigo luchando por aprender un poco más en este mundillo del desarrollo web. Tus tips son tan excelentes que sin duda alguna enseñan más que si vas a un curso de 500 horas, son muy prácticos!! Muchas gracias crack.