https://github.com/adityamamta/card-hover-animation

Card hover animation made with HTML & CSS (Scss)
https://github.com/adityamamta/card-hover-animation

card-animation card-design frontend-web html-scss responsive

Last synced: 5 days ago
JSON representation

Card hover animation made with HTML & CSS (Scss)

• Host: GitHub
• URL: https://github.com/adityamamta/card-hover-animation
• Owner: adityamamta
• Created: 2024-11-03T05:15:29.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-24T12:58:52.000Z (about 1 month ago)
• Last Synced: 2024-11-24T13:41:49.224Z (about 1 month ago)
• Topics: card-animation, card-design, frontend-web, html-scss, responsive
• Language: SCSS
• Homepage: https://adityamamta.github.io/Card-hover-animation/
• Size: 7.23 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Card Hover Animation

## 

This project showcases an interactive image card gallery with a hover effect, designed to display famous landmarks worldwide with descriptive captions.

### Key Features

- Hover Animation: When a user hovers over a card, the image zooms in slightly, a dark overlay appears, and descriptive text fades in with a smooth animation.

- Responsive Design: The gallery adjusts layout based on screen size, keeping the design consistent across various devices.

- Stylish Overlay Effect: A gradient overlay enhances the readability of captions against bright images.

- CSS Animations: Subtle text slide and fade effects enhance the user experience, implemented with keyframe animations.

### Tech Stack

- HTML & CSS for layout and styling

- SCSS for nested styling and variables

### 💼 Contact me 

- linkedin. [Linkedin](https://www.linkedin.com/in/adityamamta/)

- Email: [email protected]

![preview img](img/card-hover-animation-mockup.png)