Image Hover

Tooltip

<figure class="itooltip itooltip-dark hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'>
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>
  
<figure class="itooltip itooltip-light hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'>
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>
  
<figure class="itooltip itooltip-primary hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'>
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>

Overlay

<figure class="overlay overlay-1 hover-scale rounded">
<a href="#"> 
  <img src="..." srcset="[email protected] 2x" alt="" />
</a>
<figcaption>
  <h5 class="from-top mb-0">Some Title</h5>
</figcaption>
</figure>
  
<figure class="overlay overlay-2 hover-scale color rounded">
<a href="#"> 
  <img src="..." srcset="[email protected] 2x" alt="" />
</a>
<figcaption>
  <h5 class="from-top mb-1">Some Title</h5>
  <p class="from-bottom">Some Description</p>
</figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-1 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-2 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-3 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-4 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-5 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-6 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>
  
<figure class="overlay overlay-3 overlay-gradient-7 hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
  <figcaption>
    <h5 class="from-left mb-1">Some Title</h5>
    <p class="from-left mb-0">Some Description</p>
  </figcaption>
</figure>

Simple

<figure class="lift rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>

<figure class="hover-scale rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>

Cursor

<figure class="hover-scale cursor-dark rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>

<figure class="hover-scale cursor-light rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>

<figure class="hover-scale cursor-primary rounded">
  <a href="#"> 
    <img src="..." srcset="[email protected] 2x" alt="" />
  </a>
</figure>