Images

Additional grayscale and hover effects for figures and images.

Grayscale images

Use the @grayscale and @onhover attributes to grayscale images and apply hover effects.

Grayscale image

Color image on hover

Grayscale image on hover

<image grayscale="yes" href="..."/>
<image onhover="color" href="..."/>
<image onhover="grayscale" href="..."/>

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

Hover zoom

Use the @zoom attribute with values sm, md (or yes), and lg to magnify images on hover.

Small Zoom

Medium Zoom

Large zoom

<image zoom="sm" href="..."/>
<image zoom="md" href="..."/>
<image zoom="lg" href="..."/>

<div outputclass="hover-zoom-sm">
  <image href="..."/>
</div>
<div outputclass="hover-zoom">
  <image href="..."/>
</div>
<div outputclass="hover-zoom-lg">
  <image 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.

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 href="..."/>
  <div outputclass="overlay-100">
      <p outputclass="display-7 text-light">Strawberries!</p>
  </div>
</div>
<div outputclass="hover-fade-in-overlay">
  <image 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 hover-zoom hover-grayscale">
  <image 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 color="warning" outputclass="btn" href="#">Button</xref></p>
  </div>
</div>

Monochromatic images

Use @monochromatic="{color}" if you want a monochromatic image.

<image monochromatic="blue" href="..."/>
<image monochromatic="brown" href="..."/>
<image monochromatic="fresh" href="..."/>
<image monochromatic="gold" href="..."/>
<image monochromatic="gray" href="..."/>
<image monochromatic="green" href="..."/>
<image monochromatic="red" href="..."/>
<image monochromatic="purple" href="..."/>

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

Thumbnails

The <thumbnail> also supports the new semantic decoration attributes.

Monochromatic Thumbnail

Zooming Thumbnail

Hover Grayscale Thumbnail

<thumbnail monochromatic="blue" href="..."/>
<thumbnail zoom="lg" href="..."/>
<thumbnail onhover="grayscale" href="..."/>

<div outputclass="monochromatic-blue">
  <image outputclass="img-thumbnail" href="..."/>
</div>
<div outputclass="hover-zoom-lg">
  <image outputclass="img-thumbnail" href="..."/>
</div>
<div outputclass="hover-grayscale">
  <image outputclass="img-thumbnail" href="..."/>
</div>