By default images will appear without any borders or other styles applied.
Borders, with or without a border radius, can be applied using utility classes:
<img class="img-fluid border border-radius" src="image.jpg" alt="An image with a rounded border" />Shadows too:
<img class="img-fluid border shadow-md" src="image.jpg" alt="An image with a shadow" />Adding an overlay can be achieved using color and opacity utilities:
<div class="relative">
<img class="img-fluid" src="image.jpg" alt="An image with an overlay" />
<div class="absolute-center w-full h-full opacity-25 bg-green-500"></div>
</div>You can also present one or more images within a lightbox using our integrated Lightboxes extension.
<a href="image.jpg" data-fancybox data-caption="An image within a lightbox">
<img src="thumbnail.jpg" alt="An image within a lightbox" />
</a>