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.