Images — Liova Lab

Section 13

Galerie Horizontale

scroll-snap-type: x mandatory — navigation naturelle au doigt ou à la molette.

Glisser horizontalement

01 / 06

Architecture

Lignes nettes, volumes purs

02 / 06

Nature

Textures organiques

03 / 06

Urbain

Rythmes de la ville

04 / 06

Portrait

Fragments humains

05 / 06

Abstrait

Formes et couleurs

06 / 06

Lumière

Jeux d'ombres et de reflets

Section 14

Split Screen

Deux univers en tension. Survol pour basculer l'équilibre — flex transition sur le conteneur.

Sombre

Fait pour
la nuit.

Le fond noir absorbe tout. Les contenus respirent dans le vide. Survoler pour voir l'expansion.

Clair

Fait pour
le jour.

Le blanc révèle chaque détail. La lumière structure l'espace sans hiérarchie imposée.

Section 18

Traitements d'Images

clip-path, duotone, polaroid, masque texte, magazine float, film strip — l'image comme matière design.

Générique IA

Titre de l'image
Description générique sous l'image.

Autre titre
border-radius + box-shadow = réponse par défaut.

Troisième item
Hover translateY(-4px) systématique.

clip-path — 8 formes

circle(50%)

ellipse

hexagone

diagonal

flèche

étoile

arche

rhombe

Polaroid stack — survol pour fan

Photo 01

Photo 02

Photo 03

Duotone — mix-blend-mode multiply

Bleu électrique

Amber

Violet pink

Text mask — image masquée par le texte

IMAGE

Magazine float

Le design éditorial revient en force dans les interfaces numériques

Le float CSS, longtemps oublié au profit de Grid et Flexbox, retrouve une pertinence dans les mises en page à l'ancienne. shape-outside permet même au texte d'épouser la forme de l'image.

Cette approche crée une tension visuelle différente des grilles uniformes — le texte et l'image cohabitent dans un même espace au lieu d'être séparés par une grille.

Magazine, journal, editorial design — des références qui influencent les meilleures interfaces web de 2024.

Film strip — défilement automatique

Section 44

Curseur image au survol

Miniature image attachée au curseur qui apparaît au survol de chaque lien — pattern classique des agences créatives Awwwards. JS pur : mousemove + position fixée.

Aurora & Mesh Gradient ↗
Glassmorphism Surfaces ↗
Typographie Cinétique ↗
SVG Morphing Interactif ↗
Parallaxe & Profondeur ↗

Section 48

Distorsion image au scroll

Les images se déforment légèrement (skewY) en fonction de la vitesse du défilement, puis reprennent leur forme à l'arrêt — scroll velocity calculée en JS, aucune dépendance.

Section 49

Glace brisée

Au clic, l'image se fragmente en shards via Canvas 2D — chaque morceau explose vers l'extérieur avec gravité et rotation, puis l'image se reconstitue. Zéro dépendance.

Click → Briser

Section 39

Lazy Blur → Sharp

Technique de chargement progressif — image floue et désaturée en placeholder immédiat, transition vers la version nette une fois chargée. Feedback élégant qui masque la latence réseau.

● Chargement…

"Rejouer" simule un nouveau chargement — en production, l'image chargée déclenche automatiquement la transition via img.onload

Section 37

Effets avancés images

Grayscale-to-color, zoom crop, curtain reveal, glitch hover, blend mode overlay, tilt 3D — six techniques d'interaction premium pour sublimer les visuels.

Grayscale → couleur