✨ Hover·pédia

Collection exhaustive d'effets :hover sur image — CSS only • commentaires • séparateurs

① Zoom classique

transform: scale()

💡 L'image s'agrandit légèrement, avec une ombre portée plus marquée.

Chien zoom

② Opacité / fondu

opacity

💡 L'image devient semi-transparente (65%). Simple et efficace.

Fruits

③ Rotation subtile

rotate

💡 Légère rotation (3 degrés) combinée à un zoom minime.

Tasse café

④ Saturation & contraste

filter

💡 Les couleurs deviennent éclatantes (saturate 250%).

Paysage

⑤ Miroir horizontal

scaleX(-1)

💡 L'image est retournée comme dans un miroir.

Personne

⑥ Élévation & ombre

translateY

💡 L'image s'élève et projette une ombre profonde.

Montagne

⑦ Bordure orange animée

outline

💡 Un contour épais apparaît, avec offset.

Bureau

⑧ Retournement vertical

scaleY(-1)

💡 L'image est inversée tête en bas.

Piano

⑨ Du gris à la couleur

grayscale

💡 L'image est en niveaux de gris, et retrouve ses couleurs au survol.

Rivière

⑩ Rotation 3D (perspective)

rotateY

💡 Effet de carte qui pivote dans l'espace.

Voiture

⑪ Flou gaussien

blur()

💡 L'image devient floue au survol.

Pont

⑫ Luminosité augmentée

brightness

💡 L'image devient plus lumineuse.

Mer

⑬ Effet sépia

sepia

💡 Teinte vieillie façon photo ancienne.

Architecture

⑭ Négatif / invert

invert(100%)

💡 Les couleurs s'inversent totalement.

Rue

⑮ Ombre portée bleue

drop-shadow

💡 Utilise filter drop-shadow pour une ombre qui épouse la forme.

Feuilles

⑯ Forme hybride au survol

border-radius

💡 Coins arrondis asymétriques + zoom.

Forêt

⑰ Effet loupe (scale)

scale(1.25)

💡 Zoom plus prononcé, avec halo blanc.

Chiot

⑱ Expansion dimensionnelle

width/height

💡 L'image s'élargit et s'allonge (attention au layout).

⑲ Rotation de teinte

hue-rotate

💡 Les couleurs changent de manière cyclique (180deg).

Lac

⑳ Pulsation lumineuse

@keyframes

💡 Une ombre bleue pulse en continu au survol.

Art

㉑ Reflet lumineux (glint)

::after

💡 Un éclat traverse l'image en diagonale.

Escalier

㉒ Inclinaison (skew)

skew()

💡 L'image penche légèrement.

Plante

㉓ Ombre 3D “solide”

box-shadow multiple

💡 Deux ombres décalées créent un effet cartoon.

Oiseau

㉔ Texte overlay au survol

::after / texte

💡 Un bandeau texte glisse depuis le bas.

Cactus

🌵 Cactus

㉕ Bordure interne jaune

outline-offset négatif

💡 Le trait apparaît à l'intérieur de l'image.

Plage

✨ Fin de la collection — 25 effets de survol uniques ✨