Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Markup: templates/output/04-elements/images/figure-with-hover.html
<div class="figure-wrapper">
<figure class="image">
<picture>
<source srcset="https://placeholder.in2code.de/1400x1050" media="(min-width:960px)"/>
<source srcset="https://placeholder.in2code.de/1000x750" media="(min-width:768px)"/>
<source srcset="https://placeholder.in2code.de/700x525" media="(min-width:320px)"/>
<source srcset="https://placeholder.in2code.de/320x180" media="(min-width:0)"/><img src="https://placeholder.in2code.de/1400x1050" title="Bild Titel" alt="Alternative Text" loading="lazy" decoding="async"/>
</picture>
<figcaption class="image-caption-hover"><strong class="image-caption-hover__title strong" aria-hidden="true">Bild Titel</strong>
<div class="image-caption-hover__description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massaLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</div>
</figcaption>
</figure>
</div>
Source:
assets/sass/04-elements/_elements.images.scss, line 183