Image

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

img

<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.

evo-image

<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.

bg-[utility]

bg-cover
bg-contain
bg-no-repeat
bg-repeat
bg-repeat-x
bg-repeat-y
bg-center
bg-top
bg-right
bg-bottom
bg-left

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" />
</div>

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>
</div>
</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.