COMO HACER UNA GALERIA DE IMAGENES EN HTML

atTexto en el CSSbackgroundBorderCajon de sastrecajas flexiblesGrid layoutEl layout después columnasAnimaciones CSS3Filtros y modos del fusiónLaboratorio cssVariables CSSCSS y JavaScriptejemplos
A seguir quiero crea una sencilla galería de cuadro utilizando solamente CSS. Demasiado voy uno utilizar variable CSS sin complicarme demasiado. De dato las variables CSS aportan claridad y simplifican ns código.

Tu lees esto: Como hacer una galeria de imagenes en html

El HTML

El HTML denominaciones muy sencillo. Dentro del
tenemos 4 imágenes y cuatro botones de radio, uno hacía cada imagen. De hecho los botones vienen primero porque, dentro el CSS, quiero emplear la acento ( ~ ). Como ya se sabe ns selector elemento1 ~ elemento2 selecciona cada elemento2 precedido de un elemento1, y ns selector intake ~ img elige cada img precedida de un input.Observe caídos que ns primer botón de radio ser activado ( checked ).


no no
*
*
*
*

Las cuadro utilizadas son cuadros de substitución de varios banco de imágenes. Para der que cuales saben qué funciona esto: der dos números que aparecen al final del URL representan la anchura y la altura de la imagen. De ejemplo este URL https://kawamoebbs.net/como-hacer-una-galeria-de-imagenes-en-html/imager_1_4848_700.jpg indicar que se trata después una fotografía que combinación una ancho es después 260px y una altitudes de 300px.

El CSS

En ns CSS lo significativamente es:

1. Apilar las cuadro una sobre de diferente utilizando position: absolute;

.galeria img position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s; 2. Al aperitivo todas las imágenes son completo transparentes opacity: 0;

.galeria img position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s; 3. Al activar uno después los botones del radio ( entry type="radio" ) seleccionamos la fotografía correspondiente. El CSS acá es un pequeña verboso: si el primer botón ese radio ( input:nth-of-type(1) ) ~ ~ activado ( :checked ) la primera fotografía situada inmediatamente de ( ~ img:nth-of-type(1) ) cambio su opacidad después 0 a 1 (opacity: 1). Si los segundo botón. . . Etc. . .

.galeria input:nth-of-type(1):checked ~ img:nth-of-type(1)opacity: 1;.galeria input:nth-of-type(2):checked ~ img:nth-of-type(2)opacity: 1;.galeria input:nth-of-type(3):checked ~ img:nth-of-type(3)opacity: 1;.galeria input:nth-of-type(4):checked ~ img:nth-of-type(4)opacity: 1; O sea: al activar ns botón de radio correspondiente, la imagen pasa de opacity: 0 ( absolutamente transparente ) ns opacity:1 ( completamente opaca ). La transición después opacity: 0; un opacity: 1; dura 3 segundos: transition: opacity 3s;

.galeria img position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s; Véalo dentro de codepen:

See ns Pen Galeria CSS #1.0 by Gabi (
enxaneta) on CodePen.

Ver más: ¿Cuál Es El Nivel De Pulsaciones Por Debajo De 50, Marcapasos, ¿Cuándo Es Necesario

Utilizar variables CSS

Podemos observa que sí números los se repiten dentro de el código, como la amplio y la alturas de los imagines. Esta eliminar una de aquellas situaciones donde podemos, consiste en debemos utilizar variables. De esta manera que para establecer la amplio y la aviso de las cuadro y entonces la ancho y la alturas de la galería, he utilizado variables CSS: --w a ~ la ancho de la fotografias y --h hacia la altura.Puedo declara estas variables dentro el CSS aun en este caso he decidido ponerlas inline dentro el HTML:


style="--w: 260px; --h: 300px;">¿Por cual lo he hecho? causado normalmente construimos el HTML del manera dinámica, y es aquí donde aparecen la amplio y la altitudes de los imágenes. Así que esto me permite personalizar el tamaño de las galerías sin necesidad de modificar ns CSS.

Por de otra parte, dentro de el CSS, siempre que aparezca los valor 260px lo reemplazo alcanzar var(--w) y los valor 300px alcanzan var(--h).

See ns Pen Galeria CSS #1 by Gabi (
enxaneta) on CodePen.

Ver más: Citas Sobre Literatura Infantil Es, 20 Ideas De Frases Y Literatura Infantil

Lo bonito del todo esto eliminar que hoy dia puedo poner en una página tantas galerías qué quiera, cada galería alcanzan su tamaño y alcanzar sus imágenes, y toda por solo unas cuantas líneas ese CSS.