https://github.com/rudra-xi/image-archive

Image Archive Website: This repository contains simple HTML and CSS code for an image archive website. It features a grid of images with interactive effects like brightness and 3D rotation on hover. Perfect for anyone looking to showcase their image collection with a visually appealing interface.
https://github.com/rudra-xi/image-archive

css hover html js

Last synced: 10 months ago
JSON representation

Image Archive Website: This repository contains simple HTML and CSS code for an image archive website. It features a grid of images with interactive effects like brightness and 3D rotation on hover. Perfect for anyone looking to showcase their image collection with a visually appealing interface.

• Host: GitHub
• URL: https://github.com/rudra-xi/image-archive
• Owner: rudra-xi
• License: mit
• Created: 2024-06-27T08:06:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-26T21:49:37.000Z (about 1 year ago)
• Last Synced: 2025-02-09T17:15:27.689Z (about 1 year ago)
• Topics: css, hover, html, js
• Language: CSS
• Homepage: https://rudra-xi.github.io/image-archive/
• Size: 1.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Image Archive Website

This is a simple HTML and CSS code for an image archive website.

## Features

- Displays a grid of images.

- Hovering over an image brightens it and applies a 3D rotation effect.

- Neighboring images dim and rotate slightly on hover for a cool visual effect.

## Requirements

- Basic understanding of HTML and CSS.

- Image files placed in a folder named "images" within the same directory as the HTML file.

## Instructions

1. Replace the placeholder image names (`dark-1.jpeg`, `dark-2.jpeg`, etc.) with your own image filenames.

2. You can customize the styles in the `style.css` file to match your preferences.

## Getting Started

To get started, create a new folder for your project and copy the following files into it:

- `index.html`

- `style.css`

- A folder named "images" containing your image files.

Open the `index.html` file in a web browser to see the image archive website in action.

## Customization

Feel free to customize the styles in the `style.css` file to match your preferences. You can also add more images to the "images" folder to expand your archive.

## Contributing

If you find any bugs or have suggestions for improvements, please feel free to open an issue or submit a pull request on GitHub.

## Author

***[Rudra-xi](https://github.com/rudra-xi)***

## License

This project is licensed under the MIT License. See the [![License: MIT](https://img.shields.io/badge/License-MIT-lightblue.svg)](/LICENSE) file for more information.