CSS classes and utilities, for images contained within <img /> or <div> tags. Images will span 100% of their container.


<img src="../image/fpo.jpg" />

Use the <img /> tag with a source URL. To add a border line around the image, try using the evo-box box-1 classes.


<img class="evo-image image-size-28 image-fpo" />

Apply the evo-image class as in the above example. Background images will automatically size and crop to fit. Works with <div> tags too. Try the image-fluid class for 'max-width:100%' responsive sizing.


Image background utility classes help adjust the positioning and fit of background images.

image-border-none experimental

Use the image-border-none class to suppress border attributes. <img /> tags with an empty source src="" may display border lines, a box, or bevel. This is particularly true if you apply a link to an <img /> tag. In such cases, try using a <div> tag instead.

Image Examples

<div class="text-measure-2">
<img class="evo-image image-square box-circle image-fpo evo-box box-color-1 image-grayscale-90-hover shadow-hover-up" />

Mix the evo-image class with other classes.

Hello World
<div class="position-relative">
<img src="../image/fpo.jpg">
<div class="position-absolute image-fill transition-5-ease opacity-8-hover color-15-bg">
<div class="text-size-6 text-inverse position-middle">Hello World</div>

For hover effects, mix layout classes, image classes, opacity classes, and transition classes, as in the above example. Note the reverse stacking order of element layers.