Codigo html para tus capuras

Te gusta Esta forma de poner capturas. te dejo el codigo para que lo edites a gusto

Capturas:

Código Fuente

<style> .galeria-contenedor { max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif; border: 2px solid #444; padding: 10px; background: #111; color: #fff; border-radius: 10px; } .galeria-contenedor h2 { text-align: center; margin-bottom: 15px; font-size: 24px; border-bottom: 1px solid #555; padding-bottom: 10px; } .galeria-mosaico { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; } .galeria-mosaico img { width: 100%; cursor: pointer; border: 2px solid #666; border-radius: 5px; transition: transform 0.3s; } .galeria-mosaico img:hover { transform: scale(1.05); border-color: #0f0; } /* Lightbox */ .lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; } .lightbox img { max-width: 90%; max-height: 90%; border: 4px solid #fff; border-radius: 10px; } .lightbox:target { display: flex; } </style> <div class="galeria-contenedor"> <h2>Imágenes</h2> <div class="galeria-mosaico"> <a href="#img1"><img src="https://thumbs.dreamstime.com/b/paisajes-de-yosemite-46208063.jpg" alt="Imagen 1" /></a> <a href="#img2"><img src="https://carreteandoblog.com/wp-content/uploads/2021/06/10-hermosos-paisajes-del-mundo-para-ver-este-ano-1024x678.jpg" alt="Imagen 2" /></a> <a href="#img3"><img src="https://marketplace.canva.com/MADaqpevv8c/1/thumbnail_large-1/canva-mountain-landscape-MADaqpevv8c.jpg" alt="Imagen 3" /></a> <a href="#img4"><img src="https://imagenpng.com/wp-content/uploads/2017/01/01C.jpg" alt="Imagen 4" /></a> </div> </div> <!-- Lightbox imágenes --> <div id="img1" class="lightbox"><a href="#"><img src="https://thumbs.dreamstime.com/b/paisajes-de-yosemite-46208063.jpg" alt="Imagen ampliada 1"></a></div> <div id="img2" class="lightbox"><a href="#"><img src="https://carreteandoblog.com/wp-content/uploads/2021/06/10-hermosos-paisajes-del-mundo-para-ver-este-ano-1024x678.jpg" alt="Imagen ampliada 2"></a></div> <div id="img3" class="lightbox"><a href="#"><img src="https://marketplace.canva.com/MADaqpevv8c/1/thumbnail_large-1/canva-mountain-landscape-MADaqpevv8c.jpg" alt="Imagen ampliada 3"></a></div> <div id="img4" class="lightbox"><a href="#"><img src="https://imagenpng.com/wp-content/uploads/2017/01/01C.jpg" alt="Imagen ampliada 4"></a></div>

Nos apoyas abriendo una pequeña publicidad 🙏