Skip to content

marelycarcamo/Galeria-imagenes-SASS

Repository files navigation

GALERIA DE IMAGENES INTERACTIVA

Este programa es una página web que muestra una galería de imágenes de animales. Aquí tienes una descripción detallada:

El programa está escrito en HTML y utiliza CSS para el estilo. La página web tiene un diseño simple y limpio, con dos filas de imágenes de animales. Cada fila contiene tres imágenes.

Las imágenes se muestran en elementos

con las clases zoom1 a zoom6. Cada uno de estos elementos contiene una imagen de un animal, que se carga desde una ubicación especificada en el atributo src de la etiqueta .

El programa utiliza un archivo CSS externo llamado estiloGaleriaImagenes.css para dar estilo a la página web. Este archivo contiene las reglas CSS que controlan cómo se muestran las imágenes y los elementos

en la página.

SASS

El programa está escrito en SASS, una extensión de CSS que permite el uso de variables, anidamiento y otras características avanzadas. En este caso, se importan algunas variables desde otro archivo con la directiva @import.

La hoja de estilo define el estilo para el elemento body y varios elementos dentro de un contenedor con la clase galeria. El contenedor galeria se configura para mostrar sus elementos hijos en un diseño flexible, con un espacio uniforme alrededor de cada elemento.

Cada imagen en la galería se muestra dentro de un elemento div con una clase zoom1 a zoom6. Estos elementos div tienen un borde que utiliza un gradiente lineal de dos colores definidos por las variables $color2 y $color3.

Las imágenes dentro de los elementos div tienen varias transformaciones aplicadas cuando se pasa el cursor sobre ellas (:hover). Estas transformaciones incluyen escalado, rotación, ajuste de brillo y ajuste de escala de grises. Además, los elementos div que contienen las imágenes también se transforman cuando se pasa el cursor sobre ellos, lo que puede incluir un cambio de escala y la adición de una sombra de caja.

RESUMEN

En resumen, este programa es una manera sencilla y efectiva de mostrar una galería de imágenes en una página web, usa una hoja de estilo CSS que crea una galería de imágenes interactiva con varios efectos visuales interesantes. 😊