Image Overlay

Image container and hover effects for for <img /> or <div> tags. Use evo-image and image-size-[number] along with the effect classes. experimental

image hover effect

Hello World

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 image classes, opacity classes, and transition classes, as in the above example. Note the reverse stacking order of element layers.