Finder Docs | Images & figures

Image shapes

<!-- Square image (default) -->
<img src="..." alt="...">

<!-- Rounded image -->
<img src="..." class="rounded-4" alt="...">

<!-- Circle image -->
<img src="..." class="rounded-circle" alt="...">

Thumbnails

<!-- Square thumbnail -->
<img src="..." class="img-thumbnail rounded-0" alt="...">

<!-- Rounded thumbnail (default) -->
<img src="..." class="img-thumbnail" alt="...">

<!-- Circle thumbnail -->
<img src="..." class="img-thumbnail rounded-circle" alt="...">

Figures with caption

Caption on the left

Caption in the center

Caption on the right

<!-- Caption on the left -->
<figure class="figure">
  <img src="..." class="figure-img rounded" alt="...">
  <figcaption class="figure-caption">Caption on the left</figcaption>
</figure>

<!-- Caption in the center -->
<figure class="figure">
  <img src="..." class="figure-img rounded" alt="...">
  <figcaption class="figure-caption text-center">Caption in the center</figcaption>
</figure>

<!-- Caption on the right -->
<figure class="figure">
  <img src="..." class="figure-img rounded" alt="...">
  <figcaption class="figure-caption text-end">Caption on the right</figcaption>
</figure>

Image swap on hover

<!-- Swap images on hover -->
<div class="position-relative hover-effect-opacity rounded overflow-hidden" style="max-width: 306px;">
  <img src="assets/img/blog/v1/03.jpg" class="hover-effect-target opacity-100" alt="Image idle">
  <img src="assets/img/blog/v1/02.jpg" class="position-absolute top-0 start-0 hover-effect-target opacity-0" alt="Image hover">
</div>

Image scale (zoom) on hover

<!-- Scale (zoom) image on hover -->
<div class="hover-effect-scale rounded overflow-hidden" style="max-width: 306px;">
  <img src="assets/img/blog/v3/03.jpg" class="hover-effect-target" alt="Image">
</div>