Images

Additional grayscale and hover effects for figures and images.

Grayscale images

Use @outputclass="grayscale", @outputclass="hover-color and @outputclass="hover-grayscale to grayscale figures and images.

Grayscale image

Color image on hover

Grayscale image on hover

<div outputclass="grayscale">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="hover-color">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="hover-grayscale">
  <image outputclass="w-100" href="..."/>
</div>

Hover zoom

Drag the mouse over the images and the hover-zoom-sm, hover-zoom and hover-zoom-lg outputclasses will magnify them.

Small Zoom

Medium Zoom

Large zoom

<div outputclass="hover-zoom-sm">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="hover-zoom">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="hover-zoom-lg">
  <image outputclass="w-100" href="..."/>
</div>

Fade in overlay

Hover over the image to see the effect. Just use the hover-fade-in-overlay outputclass and the overlay-{visibility} outputclasses for this effect. Use the from-t and from-b classes to specify the direction of the sliding content.

Where visibility is one of:

25 - for class that set opacity 25%
50 - for class that set opacity 50%
75 - for class that set opacity 75%
100 - for class that set opacity 100%

Strawberries!

Photo: Veeterzy

It is a daisy!

Photo: Aaron Burden

It is a tulip!

It is a paragraph!

Button

Photo: Ales Krivec

<div outputclass="hover-fade-in-overlay">
  <image outputclass="w-100" href="..."/>
  <div outputclass="overlay-100">
      <p outputclass="display-7 text-light">Strawberries!</p>
  </div>
</div>
<div outputclass="hover-fade-in-overlay">
  <image outputclass="w-100" href="..."/>
  <div outputclass="overlay-100 from-t bg-rose">
      <p outputclass="display-7 text-light">It is a daisy!</p>
  </div>
</div>
<div outputclass="hover-fade-in-overlay">
  <image outputclass="w-100" href="..."/>
  <div outputclass="overlay-75 from-b bg-black">
      <p outputclass="display-7 text-light">It is a tulip!</p>
      <p outputclass="text-light">It is a paragraph!</p>
      <p><xref outputclass="btn btn-warning" href="#">Button</xref></p>
  </div>
</div>

Monochromatic images

Use @outputclass="monochrome-{color}" if you want a monochrome image

<div outputclass="monochromatic-blue">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-brown">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-fresh">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-gold">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-gray">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-green">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-red">
  <image outputclass="w-100" href="..."/>
</div>
<div outputclass="monochromatic-purple">
  <image outputclass="w-100" href="..."/>
</div>