Images

There are plenty of hover effects that you can use to make your images interactive.

Variation 1

  • .ol-hover class is the general class that should be used to specify that this is a hover element

  • .hover-1 specifies the hover variation

  • .ol-overlay stands for the overlay which the .ov-dark-alpha-80 determines the visual

  • .icons wrapps the icons

  • ol-lightbox maked the anchor a lightbox, don't forget to add the image source to href

Variation 2

Above code adds h3.title and h4.subtitle to the markup and off course uses .hover-2

Variation 3

Above code uses .hover-3 and it is pretty much similar to hover2

Variation 4

This variation adds a <div class="cover ov-dark-alpha-95"></div> which is the dark bottom bar

Variation 5

This element is not similar to other hover effects. It is essentially a anchor link which can be used as a lightbox ( like above example) or a simple link

To use a text instead of an icon you can change

to

PreviousListsNextlightbox

Last updated