Image Hover Zoom Challenge

Create a responsive grid of images with engaging hover effects using HTML and CSS.

Table of Contents

• Introduction
• Purpose
• Prerequisites
• File Structure
• Tools
• Preview
• Contributing

Introduction

This challenge involves creating a grid of images that react dynamically when hovered over. Each image zooms in and applies unique transformations, providing a visually engaging experience for users. The challenge is designed to practice and enhance your HTML and CSS skills, specifically focusing on grid layouts and hover effects.

Purpose

The purpose of this challenge is to:

• Practice creating responsive grid layouts with CSS.
• Explore different CSS hover effects and transitions.
• Enhance your understanding of CSS transformations and animations.
• Improve your ability to create visually appealing web pages using only HTML and CSS.

Prerequisites

Before you begin, ensure you have the following:

• Basic knowledge of HTML and CSS.

File Structure

Here’s the file structure for this challenge:

image-hover-zoom-challenge/
├── index.html
├── styles.css
├── images/
│   ├── image-1.jpeg
│   ├── image-2.jpg
│   ├── image-3.jpeg
│   ├── image-4.jpg
│   ├── image-5.jpeg
│   ├── image-6.jpeg
│   ├── image-7.jpeg
│   ├── image-8.jpeg
│   ├── image-9.jpeg
│   └── image-10.jpeg

Tools

The tools used for this challenge are:

• A code editor (e.g., VSCode, Sublime Text).
• A web browser (e.g., Chrome, Firefox) for testing.

Preview

Here’s a preview of the Image Hover Zoom Challenge:

Live Demo

Preview

Contributing

We welcome contributions to enhance the Image Hover Zoom Challenge! Whether you want to fix bugs, add new features, or improve the documentation, your help is greatly appreciated. Please follow these guidelines to contribute:

How to Contribute

1. Fork the Repository
2. Clone the Repository
   • Clone the forked repository to your local machine using the following command:

     git clone https://github.com/Yashi-Singh-1/Image-Hover-Zoom-Challenge.git

3. Create a New Branch
   • Navigate to the project directory:

     cd Image-Hover-Zoom-Challenge

   • Create a new branch for your feature or bug fix:

     git checkout -b feature/your-feature-name

     Replace your-feature-name with a descriptive name for your branch.
4. Make Your Changes
   • Implement your changes in the new branch.
   • Ensure your code follows the project's coding standards and conventions.
   • Test your changes thoroughly.
5. Commit Your Changes
   • Stage your changes:

     git add .

   • Commit your changes with a descriptive commit message:

     git commit -m "Add your descriptive commit message"

6. Push Your Changes
   • Push your changes to your forked repository:

     git push origin feature/your-feature-name

7. Submit a Pull Request
   • Navigate to the original repository on GitHub.
   • Click the "New Pull Request" button.
   • Select your branch from the "Compare" dropdown.
   • Add a descriptive title and detailed description of your changes.
   • Submit the pull request.

Guidelines for Contributing

• Code Style
  • Follow the existing code style and conventions used in the project.
  • Ensure your code is clean, well-commented, and easy to understand.
• Commit Messages
  • Write clear and concise commit messages.
  • Use the imperative mood in the subject line (e.g., "Add new hover effect").

Thank you for contributing to the Image Hover Zoom Challenge! Your contributions help make this project better for everyone.