An open API service indexing awesome lists of open source software.

https://github.com/valentinmadiot/img-hover-effects_css

Composants UI animés en HTML et CSS, avec effets de survol fluides et design responsive. Idéal pour sublimer visuellement vos interfaces web, portfolios, galeries ou pages de présentation.
https://github.com/valentinmadiot/img-hover-effects_css

animation animation-css card-hover component-ui creative-ui design effects frontend gallery-images hover-effect html-css-project image-cards interactive-cards landing-page minimalist modern-ui no-js responsive-design ui-components webdesign

Last synced: 3 months ago
JSON representation

Composants UI animés en HTML et CSS, avec effets de survol fluides et design responsive. Idéal pour sublimer visuellement vos interfaces web, portfolios, galeries ou pages de présentation.

Awesome Lists containing this project

README

          



Aperçu des effets de survol des images


🏞 Effet de Survol d'Images


##
📌 Sommaire

    🎨   [**Introduction**](#introduction)

    🛠️   [**Technologies**](#technologies)

    🎯   [**Fonctionnalités**](#fonctionnalités)

    🚀   [**Installation**](#installation)

##
🎨 Introduction

Composants d'images interactives animées en HTML et CSS pur avec effet de survol dynamique.

Chaque image associe un visuel attractif, un texte descriptif et un bouton d'action, le tout révélé élégamment au survol.

Design responsive, animations fluides en pur CSS, parfait pour portfolios, galeries, etc...

##
🛠️ Technologies

- HTML5 structuré et sémantique
- CSS3 moderne (variables CSS, media queries, animations)
- Responsive Design avec breakpoints
- Aucune dépendance JS : 100% CSS natif

##
🎯 Fonctionnalités

- Apparition animée du texte lors du survol de l’image
- Design responsive multi-colonnes : 1, 2 ou 3 images selon la taille d’écran
- Transitions douces et effets CSS : `@keyframes`, `:hover`
- Images et données facilement modifiables
- Aucune librairie externe requise

##
🚀 Installation

### ✅ Prérequis

- [Google Chrome](https://www.google.com/)  —  Navigateur moderne
- [Visual Studio Code](https://code.visualstudio.com/)  —  Éditeur de code
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  —  Extension VS Code

### 📥 Cloner le projet

```bash
git clone https://github.com/ValentinMadiot/img-hover-effects_css
cd img-hover-effects_css
```

### ▶️ Lancer le projet

Il suffit d’ouvrir le fichier `index.html` dans un navigateur, ou d’utiliser l’extension **Live Server** sur VS Code pour un aperçu dynamique.