Image Hover

<template>
  <div class="item col-md-6 col-lg-4">
    <figure
      class="itooltip itooltip-dark hover-scale rounded"
      title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'
      v-tippy="{
        content: `<h5 class='mb-0 py-2 px-2 bg-dark text-white rounded'>Quam Sit Ornare</h5>`,
        allowHTML: true,
        followCursor: true,
      }"
    >
      <a href="#">
        <nuxt-img
          src="/assets/img/photos/p1.jpg"
          srcset="/assets/img/photos/p1@2x.jpg 2x"
          alt=""
      /></a>
    </figure>
  </div>
  <!--/column -->
  <div class="item col-md-6 col-lg-4">
    <figure
      class="itooltip itooltip-light hover-scale rounded"
      v-tippy="{
        content: `<h5 class='mb-0 py-2 px-2 bg-light rounded'>Quam Sit Ornare</h5>`,
        allowHTML: true,
        followCursor: true,
      }"
    >
      <a href="#">
        <nuxt-img
          src="/assets/img/photos/p2.jpg"
          srcset="/assets/img/photos/p2@2x.jpg 2x"
          alt=""
      /></a>
    </figure>
  </div>
  <!--/column -->
  <div class="item col-md-6 col-lg-4">
    <figure
      class="itooltip itooltip-primary hover-scale rounded"
      v-tippy="{
        content: `<h5 class='mb-0 py-2 px-2 bg-primary text-white rounded'>Quam Sit Ornare</h5>`,
        allowHTML: true,
        followCursor: true,
      }"
    >
      <a href="#">
        <nuxt-img
          src="/assets/img/photos/p3.jpg"
          srcset="/assets/img/photos/p3@2x.jpg 2x"
          alt=""
      /></a>
    </figure>
  </div>
</template>

<script setup>
import { directive as VTippy } from "vue-tippy";
</script>

<style lang="scss" scoped></style>
              

<figure class="overlay overlay-1 hover-scale rounded">
<a href="#"> 
  <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
  <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 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="lift rounded">
  <a href="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 2x" alt="" />
  </a>
</figure>

<figure class="hover-scale rounded">
  <a href="#"> 
    <nuxt-img src="..." srcset="...@2x.jpg 2x" alt="" />
  </a>
</figure>