https://github.com/harshbisht27/image-gallery

CSS applies styles to the gallery layout, images, and captions, including effects for hover states such as image scaling, grayscale to color transition, and caption opacity transition
https://github.com/harshbisht27/image-gallery

Last synced: about 1 month ago
JSON representation

CSS applies styles to the gallery layout, images, and captions, including effects for hover states such as image scaling, grayscale to color transition, and caption opacity transition

• Host: GitHub
• URL: https://github.com/harshbisht27/image-gallery
• Owner: harshbisht27
• Created: 2024-05-12T04:24:36.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-12T04:38:50.000Z (8 months ago)
• Last Synced: 2024-05-12T05:21:30.857Z (8 months ago)
• Language: HTML
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Image Gallery

This is a simple yet stylish image gallery created using HTML and CSS. It provides an interactive way to showcase a collection of images in a grid layout.

Features

Responsive design: The gallery adjusts its layout to fit various screen sizes, providing an optimal viewing experience on both desktop and mobile devices.

Hover effects: Each image in the gallery has hover effects applied, enhancing user interaction and visual appeal.

Grayscale to color transition: When hovering over an image, it transitions from grayscale to color, drawing attention to the selected image.

Caption animations: Captions associated with each image fade in and scale up upon hover, providing additional context or description for the image.

File Structure

index.html: Contains the HTML markup defining the structure of the image gallery page.

style.css: Defines the styles for the gallery layout, images, captions, and hover effects.

How to Use

Clone this repository to your local machine or download the ZIP file.

Open the index.html file in your web browser to view the image gallery.

Modify the HTML markup or CSS styles as needed to customize the gallery layout or appearance.

Add your own images by replacing the existing image files in the img folder with your desired images.

Credits

This image gallery is created by [Your Name].

Link

https://harshbisht27.github.io/Image-Gallery/