08. Cadrages Photo

Le DSML propose plusieurs styles de cadrage et effets d'arrière-plan pour les photos de héros afin de s'adapter à la tonalité éditoriale de chaque site.

Styles de cadres disponibles

1. Standard (Glow Royal) Défaut

class="ml-hero-split-media"

2. Glow Sunset

class="... ml-frame-glow-sunset"

3. Offset Gold

class="... ml-frame-offset-gold"

4. Offset Green

class="... ml-frame-offset-green"

5. Gold Brackets

class="... ml-frame-brackets-gold"

6. Épuré (Minimal)

class="... ml-frame-minimal"

Exemple d'intégration

    
HTML

<!-- Image with Offset Gold frame -->
<div class="ml-hero-split-media ml-frame-offset-gold">
  <img src="images/hero-mali.png" alt="Jeunes entrepreneurs" loading="lazy">
</div>

Effet Vignette Image Zoom (Hover Zoom)

Crée une transition de grossissement fluide sur les images et les cartes au survol (hover) ou au focus clavier.

Enveloppez simplement votre image dans un conteneur possédant la classe ml-img-zoom-container.

    
HTML

<!-- Example with news card -->
<a href="#" class="news-card">
  <div class="ml-img-zoom-container" style="height: 130px;">
    <img src="images/mali-photo.jpg" alt="Description de l'image" loading="lazy">
  </div>
  <h3 class="news-title">Titre de l'actualité</h3>
</a>