Image
Hover
Gallery
Css
Html
Galerie d'effets hover CSS sur images avec transitions, overlays et interactions visuelles pour cartes et portfolios.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Images Hover 01 | AngularForAll</title>
<style>
/* ----- RESET & STYLES GLOBAUX ----- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
padding: 2rem 1.5rem;
color: #1e293b;
}
h1 {
font-weight: 600;
font-size: 2.8rem;
letter-spacing: -0.5px;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #0f172a, #334155);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 2px 4px 12px rgba(0,0,0,0.05);
}
.subtitle {
font-size: 1.2rem;
margin-bottom: 2.5rem;
color: #475569;
border-left: 6px solid #3b82f6;
padding-left: 1.2rem;
}
/* Conteneur principal en grille flexible */
.gallery {
display: flex;
flex-direction: column;
gap: 1.8rem;
max-width: 1400px;
margin: 0 auto;
}
/* Chaque "carte d'exemple" */
.example-card {
background: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 2rem;
padding: 1.8rem 2rem 2rem;
box-shadow: 0 20px 35px -8px rgba(0,0,0,0.15), 0 5px 10px -4px rgba(0,0,0,0.05);
border: 1px solid rgba(255,255,255,0.6);
transition: box-shadow 0.3s;
}
.example-card:hover {
box-shadow: 0 25px 40px -12px rgba(0,20,50,0.25);
}
/* En-tête de chaque exemple */
.card-header {
display: flex;
align-items: baseline;
gap: 15px;
margin-bottom: 20px;
}
.card-header h2 {
font-weight: 600;
font-size: 1.8rem;
color: #0b1e33;
}
.badge {
background: #1e293b;
color: white;
padding: 0.2rem 1rem;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.3px;
opacity: 0.75;
}
/* Commentaire descriptif sous le titre */
.comment {
background: #f1f5f9;
padding: 0.8rem 1.5rem;
border-radius: 40px;
margin-bottom: 1.8rem;
color: #0f172a;
font-weight: 500;
border-left: 5px solid #3b82f6;
font-size: 1rem;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}
.comment i {
color: #2563eb;
margin-right: 8px;
}
/* ----- CONTENEUR D'IMAGE COMMUN (pour centrer l'image) ----- */
.img-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 220px;
padding: 10px;
}
/* Style de base pour TOUTES les images de démo */
.demo-img {
width: 280px;
height: 200px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
transition: all 0.25s ease-in-out; /* transition par défaut (sera surchargée parfois) */
display: block;
border: 3px solid rgba(255,255,255,0.5);
background-color: #cbd5e1; /* fallback */
}
/* ----- LIGNE HORIZONTALE STYLÉE (hr) ----- */
.separator {
margin: 2.5rem 0 0.8rem;
border: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #94a3b8, #64748b, #94a3b8, transparent);
opacity: 0.5;
}
/* Pour les hr supplémentaires dans la page (entre cartes) */
hr {
border: none;
height: 3px;
background: linear-gradient(to right, #cbd5e1, #3b82f6, #cbd5e1);
margin: 2.5rem 0 1.5rem;
border-radius: 100px;
opacity: 0.7;
}
/* ----- STYLES SPÉCIFIQUES POUR CHAQUE HOVER ----- */
/* Tous les effets sont définis avec la classe .hover-xxx */
/* 1. ZOOM CLASSIQUE */
.hover-zoom:hover {
transform: scale(1.08);
box-shadow: 0 20px 30px -5px rgba(0,0,0,0.3);
}
/* 2. OPACITÉ / FONDU */
.hover-opacity:hover {
opacity: 0.65;
transition: opacity 0.2s;
}
/* 3. ROTATION LÉGÈRE */
.hover-rotate:hover {
transform: rotate(3deg) scale(1.02);
transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1);
}
/* 4. SATURATION + CONTRASTE (filtre) */
.hover-saturate:hover {
filter: saturate(250%) contrast(120%);
transition: filter 0.3s;
}
/* 5. FLIP HORIZONTAL (miroir) */
.hover-flip:hover {
transform: scaleX(-1);
}
/* 6. OMBRE PROFONDE + LÉGER LIFT */
.hover-shadow-lift:hover {
transform: translateY(-8px);
box-shadow: 0 25px 30px -8px #0f172a80;
transition: transform 0.2s, box-shadow 0.25s;
}
/* 7. BORDURE COLORÉE ANIMÉE */
.hover-border:hover {
outline: 5px solid #f97316;
outline-offset: 4px;
border-radius: 24px; /* un peu plus arrondi */
transition: outline 0.15s, border-radius 0.2s;
}
/* 8. FLIP VERTICAL (retournement) */
.hover-flip-vertical:hover {
transform: scaleY(-1);
}
/* 9. GRAYSCALE -> COULEUR (image initialement grise) */
.hover-color-from-gray {
filter: grayscale(100%);
transition: filter 0.4s;
}
.hover-color-from-gray:hover {
filter: grayscale(0%);
}
/* 10. FLIP 3D (rotationY) */
.hover-3d-rotate:hover {
transform: perspective(800px) rotateY(12deg) rotateX(4deg);
box-shadow: -15px 15px 25px rgba(0,0,0,0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
/* 11. BLUR (flou) */
.hover-blur:hover {
filter: blur(3.5px);
transition: filter 0.2s;
}
/* 12. BRILLANCE (brightness) + léger zoom */
.hover-brightness:hover {
filter: brightness(135%);
transform: scale(1.02);
transition: all 0.25s;
}
/* 13. SÉPIA */
.hover-sepia:hover {
filter: sepia(80%);
}
/* 14. INVERT (négatif) */
.hover-invert:hover {
filter: invert(100%);
}
/* 15. DROP SHADOW COLORÉ */
.hover-drop-shadow:hover {
filter: drop-shadow(12px 12px 12px #2563ebaa);
transform: translate(-3px, -3px);
transition: filter 0.2s, transform 0.2s;
}
/* 16. ZOOM AVEC BORD ARRONDI ANIMÉ */
.hover-round-zoom {
transition: border-radius 0.3s, transform 0.3s;
}
.hover-round-zoom:hover {
border-radius: 50% 20% 50% 20% / 20% 50% 20% 50%;
transform: scale(1.1);
}
/* 17. EFFET DE LOUPE (scale + origine) - attention nécessite overflow hidden sur conteneur? ici c'est géré */
.hover-magnify:hover {
transform: scale(1.25);
transform-origin: center center;
transition: transform 0.25s;
box-shadow: 0 0 0 6px white, 0 15px 30px black;
}
/* 18. CONTRACT / EXPAND (width change) */
.hover-expand {
transition: width 0.3s, height 0.3s, object-fit;
}
.hover-expand:hover {
width: 320px;
height: 230px;
object-fit: cover;
}
/* 19. HUE ROTATE (changement de teinte) */
.hover-hue:hover {
filter: hue-rotate(180deg);
transition: filter 0.4s;
}
/* 20. EFFET PULSE (ombre + scale) */
.hover-pulse:hover {
animation: pulse-shadow 1s infinite;
}
@keyframes pulse-shadow {
0% { box-shadow: 0 0 0 0 #3b82f6; transform: scale(1); }
70% { box-shadow: 0 0 0 15px #3b82f600; transform: scale(1.03); }
100% { box-shadow: 0 0 0 0 #3b82f600; transform: scale(1); }
}
/* 21. EFFET DIAGONAL LUMIÈRE (overlay) - nécessite un wrapper, on l'intègre avec pseudo */
.hover-glint {
position: relative;
overflow: hidden; /* pour cacher le pseudo élément */
}
.hover-glint::after {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 200%;
height: 200%;
background: linear-gradient(115deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 40%, rgba(255,255,240,0.8) 50%, rgba(255,255,255,0) 60%);
transform: rotate(25deg);
opacity: 0;
transition: opacity 0.25s, left 0.5s;
pointer-events: none;
}
.hover-glint:hover::after {
opacity: 1;
left: 100%;
transition: left 0.7s ease-out, opacity 0.2s;
}
/* Petite adaptation pour l'image contenue dans le wrapper glint */
.glint-wrapper {
display: inline-block;
position: relative;
border-radius: 20px;
line-height: 0;
}
.glint-wrapper .demo-img {
display: block;
}
/* 22. SKEW (inclinaison) */
.hover-skew:hover {
transform: skew(-3deg, 1deg) scale(1.02);
}
/* 23. EFFET 3D AVEC BOX-SHADOW MULTIPLE */
.hover-3d-box:hover {
box-shadow: 8px 8px 0 #1e293b, 16px 16px 0 #64748b;
transform: translate(-5px, -5px);
}
/* 24. OVERLAY TEXTE (apparition d'un texte au survol) - méthode CSS only */
.overlay-text-container {
position: relative;
display: inline-block;
line-height: 0;
border-radius: 20px;
overflow: hidden;
}
.overlay-text-container .demo-img {
display: block;
transition: filter 0.2s;
}
.overlay-text-container .hover-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.8);
color: white;
text-align: center;
padding: 12px 0;
font-weight: bold;
font-size: 1.2rem;
backdrop-filter: blur(4px);
transform: translateY(100%);
transition: transform 0.25s ease;
border-radius: 0 0 20px 20px;
}
.overlay-text-container:hover .hover-text {
transform: translateY(0);
}
.overlay-text-container:hover .demo-img {
filter: brightness(90%);
}
/* 25. ZOOM AVEC BORDURE INTERNE (outline + offset) */
.hover-outline-glow:hover {
outline: 5px solid #facc15;
outline-offset: -5px;
border-radius: 24px;
}
/* Amélioration responsive */
@media (max-width: 700px) {
body { padding: 1rem; }
h1 { font-size: 2rem; }
.demo-img { width: 220px; height: 160px; }
.example-card { padding: 1.2rem; }
}
</style>
</head>
<body>
<h1>✨ Hover·pédia</h1>
<div class="subtitle">Collection exhaustive d'effets :hover sur image — CSS only • commentaires • séparateurs</div>
<div class="gallery">
<!-- ========== EXEMPLE 1 : ZOOM ========= -->
<div class="example-card">
<div class="card-header">
<h2>① Zoom classique</h2>
<span class="badge">transform: scale()</span>
</div>
<div class="comment"><i>💡</i> L'image s'agrandit légèrement, avec une ombre portée plus marquée.</div>
<div class="img-container">
<img class="demo-img hover-zoom" src="https://picsum.photos/id/1043/400/300" alt="Chien zoom">
</div>
</div>
<hr> <!-- hr entre les exemples -->
<!-- 2. OPACITÉ -->
<div class="example-card">
<div class="card-header"><h2>② Opacité / fondu</h2><span class="badge">opacity</span></div>
<div class="comment"><i>💡</i> L'image devient semi-transparente (65%). Simple et efficace.</div>
<div class="img-container">
<img class="demo-img hover-opacity" src="https://picsum.photos/id/102/400/300" alt="Fruits">
</div>
</div>
<hr>
<!-- 3. ROTATION -->
<div class="example-card">
<div class="card-header"><h2>③ Rotation subtile</h2><span class="badge">rotate</span></div>
<div class="comment"><i>💡</i> Légère rotation (3 degrés) combinée à un zoom minime.</div>
<div class="img-container">
<img class="demo-img hover-rotate" src="https://picsum.photos/id/30/400/300" alt="Tasse café">
</div>
</div>
<hr>
<!-- 4. SATURATION -->
<div class="example-card">
<div class="card-header"><h2>④ Saturation & contraste</h2><span class="badge">filter</span></div>
<div class="comment"><i>💡</i> Les couleurs deviennent éclatantes (saturate 250%).</div>
<div class="img-container">
<img class="demo-img hover-saturate" src="https://picsum.photos/id/28/400/300" alt="Paysage">
</div>
</div>
<hr>
<!-- 5. FLIP HORIZONTAL -->
<div class="example-card">
<div class="card-header"><h2>⑤ Miroir horizontal</h2><span class="badge">scaleX(-1)</span></div>
<div class="comment"><i>💡</i> L'image est retournée comme dans un miroir.</div>
<div class="img-container">
<img class="demo-img hover-flip" src="https://picsum.photos/id/22/400/300" alt="Personne">
</div>
</div>
<hr>
<!-- 6. OMBRE + LIFT -->
<div class="example-card">
<div class="card-header"><h2>⑥ Élévation & ombre</h2><span class="badge">translateY</span></div>
<div class="comment"><i>💡</i> L'image s'élève et projette une ombre profonde.</div>
<div class="img-container">
<img class="demo-img hover-shadow-lift" src="https://picsum.photos/id/52/400/300" alt="Montagne">
</div>
</div>
<hr>
<!-- 7. BORDURE COLORÉE -->
<div class="example-card">
<div class="card-header"><h2>⑦ Bordure orange animée</h2><span class="badge">outline</span></div>
<div class="comment"><i>💡</i> Un contour épais apparaît, avec offset.</div>
<div class="img-container">
<img class="demo-img hover-border" src="https://picsum.photos/id/60/400/300" alt="Bureau">
</div>
</div>
<hr>
<!-- 8. FLIP VERTICAL -->
<div class="example-card">
<div class="card-header"><h2>⑧ Retournement vertical</h2><span class="badge">scaleY(-1)</span></div>
<div class="comment"><i>💡</i> L'image est inversée tête en bas.</div>
<div class="img-container">
<img class="demo-img hover-flip-vertical" src="https://picsum.photos/id/42/400/300" alt="Piano">
</div>
</div>
<hr>
<!-- 9. GRAYSCALE -> COULEUR -->
<div class="example-card">
<div class="card-header"><h2>⑨ Du gris à la couleur</h2><span class="badge">grayscale</span></div>
<div class="comment"><i>💡</i> L'image est en niveaux de gris, et retrouve ses couleurs au survol.</div>
<div class="img-container">
<img class="demo-img hover-color-from-gray" src="https://picsum.photos/id/15/400/300" alt="Rivière">
</div>
</div>
<hr>
<!-- 10. ROTATION 3D -->
<div class="example-card">
<div class="card-header"><h2>⑩ Rotation 3D (perspective)</h2><span class="badge">rotateY</span></div>
<div class="comment"><i>💡</i> Effet de carte qui pivote dans l'espace.</div>
<div class="img-container">
<img class="demo-img hover-3d-rotate" src="https://picsum.photos/id/84/400/300" alt="Voiture">
</div>
</div>
<hr>
<!-- 11. BLUR -->
<div class="example-card">
<div class="card-header"><h2>⑪ Flou gaussien</h2><span class="badge">blur()</span></div>
<div class="comment"><i>💡</i> L'image devient floue au survol.</div>
<div class="img-container">
<img class="demo-img hover-blur" src="https://picsum.photos/id/26/400/300" alt="Pont">
</div>
</div>
<hr>
<!-- 12. BRILLANCE -->
<div class="example-card">
<div class="card-header"><h2>⑫ Luminosité augmentée</h2><span class="badge">brightness</span></div>
<div class="comment"><i>💡</i> L'image devient plus lumineuse.</div>
<div class="img-container">
<img class="demo-img hover-brightness" src="https://picsum.photos/id/37/400/300" alt="Mer">
</div>
</div>
<hr>
<!-- 13. SÉPIA -->
<div class="example-card">
<div class="card-header"><h2>⑬ Effet sépia</h2><span class="badge">sepia</span></div>
<div class="comment"><i>💡</i> Teinte vieillie façon photo ancienne.</div>
<div class="img-container">
<img class="demo-img hover-sepia" src="https://picsum.photos/id/64/400/300" alt="Architecture">
</div>
</div>
<hr>
<!-- 14. INVERT -->
<div class="example-card">
<div class="card-header"><h2>⑭ Négatif / invert</h2><span class="badge">invert(100%)</span></div>
<div class="comment"><i>💡</i> Les couleurs s'inversent totalement.</div>
<div class="img-container">
<img class="demo-img hover-invert" src="https://picsum.photos/id/58/400/300" alt="Rue">
</div>
</div>
<hr>
<!-- 15. DROP SHADOW COLORÉ -->
<div class="example-card">
<div class="card-header"><h2>⑮ Ombre portée bleue</h2><span class="badge">drop-shadow</span></div>
<div class="comment"><i>💡</i> Utilise filter drop-shadow pour une ombre qui épouse la forme.</div>
<div class="img-container">
<img class="demo-img hover-drop-shadow" src="https://picsum.photos/id/96/400/300" alt="Feuilles">
</div>
</div>
<hr>
<!-- 16. BORD ARRONDI DYNAMIQUE -->
<div class="example-card">
<div class="card-header"><h2>⑯ Forme hybride au survol</h2><span class="badge">border-radius</span></div>
<div class="comment"><i>💡</i> Coins arrondis asymétriques + zoom.</div>
<div class="img-container">
<img class="demo-img hover-round-zoom" src="https://picsum.photos/id/74/400/300" alt="Forêt">
</div>
</div>
<hr>
<!-- 17. EFFET LOUPE -->
<div class="example-card">
<div class="card-header"><h2>⑰ Effet loupe (scale)</h2><span class="badge">scale(1.25)</span></div>
<div class="comment"><i>💡</i> Zoom plus prononcé, avec halo blanc.</div>
<div class="img-container">
<img class="demo-img hover-magnify" src="https://picsum.photos/id/108/400/300" alt="Chiot">
</div>
</div>
<hr>
<!-- 18. AGRANDISSEMENT LARGEUR/HAUTEUR -->
<div class="example-card">
<div class="card-header"><h2>⑱ Expansion dimensionnelle</h2><span class="badge">width/height</span></div>
<div class="comment"><i>💡</i> L'image s'élargit et s'allonge (attention au layout).</div>
<div class="img-container">
<img class="demo-img hover-expand" src="https://picsum.photos/id/122/400/300" alt="Ville">
</div>
</div>
<hr>
<!-- 19. HUE ROTATE -->
<div class="example-card">
<div class="card-header"><h2>⑲ Rotation de teinte</h2><span class="badge">hue-rotate</span></div>
<div class="comment"><i>💡</i> Les couleurs changent de manière cyclique (180deg).</div>
<div class="img-container">
<img class="demo-img hover-hue" src="https://picsum.photos/id/33/400/300" alt="Lac">
</div>
</div>
<hr>
<!-- 20. PULSE (animation) -->
<div class="example-card">
<div class="card-header"><h2>⑳ Pulsation lumineuse</h2><span class="badge">@keyframes</span></div>
<div class="comment"><i>💡</i> Une ombre bleue pulse en continu au survol.</div>
<div class="img-container">
<img class="demo-img hover-pulse" src="https://picsum.photos/id/59/400/300" alt="Art">
</div>
</div>
<hr>
<!-- 21. EFFET GLINT (reflet diagonal) -->
<div class="example-card">
<div class="card-header"><h2>㉑ Reflet lumineux (glint)</h2><span class="badge">::after</span></div>
<div class="comment"><i>💡</i> Un éclat traverse l'image en diagonale.</div>
<div class="img-container">
<div class="glint-wrapper hover-glint">
<img class="demo-img" src="https://picsum.photos/id/43/400/300" alt="Escalier">
</div>
</div>
</div>
<hr>
<!-- 22. SKEW -->
<div class="example-card">
<div class="card-header"><h2>㉒ Inclinaison (skew)</h2><span class="badge">skew()</span></div>
<div class="comment"><i>💡</i> L'image penche légèrement.</div>
<div class="img-container">
<img class="demo-img hover-skew" src="https://picsum.photos/id/76/400/300" alt="Plante">
</div>
</div>
<hr>
<!-- 23. OMBRE 3D STYLE BANDE DESSINÉE -->
<div class="example-card">
<div class="card-header"><h2>㉓ Ombre 3D “solide”</h2><span class="badge">box-shadow multiple</span></div>
<div class="comment"><i>💡</i> Deux ombres décalées créent un effet cartoon.</div>
<div class="img-container">
<img class="demo-img hover-3d-box" src="https://picsum.photos/id/92/400/300" alt="Oiseau">
</div>
</div>
<hr>
<!-- 24. OVERLAY TEXTE APPARAISSANT -->
<div class="example-card">
<div class="card-header"><h2>㉔ Texte overlay au survol</h2><span class="badge">::after / texte</span></div>
<div class="comment"><i>💡</i> Un bandeau texte glisse depuis le bas.</div>
<div class="img-container">
<div class="overlay-text-container">
<img class="demo-img" src="https://picsum.photos/id/64/400/300" alt="Cactus">
<div class="hover-text">🌵 Cactus</div>
</div>
</div>
</div>
<hr>
<!-- 25. OUTLINE INTERNE -->
<div class="example-card">
<div class="card-header"><h2>㉕ Bordure interne jaune</h2><span class="badge">outline-offset négatif</span></div>
<div class="comment"><i>💡</i> Le trait apparaît à l'intérieur de l'image.</div>
<div class="img-container">
<img class="demo-img hover-outline-glow" src="https://picsum.photos/id/82/400/300" alt="Plage">
</div>
</div>
<!-- Séparateur final optionnel -->
<hr style="margin-top: 2rem;">
<p style="text-align: center; opacity: 0.7; font-style: italic;">✨ Fin de la collection — 25 effets de survol uniques ✨</p>
</div> <!-- fin gallery -->
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur