Vue Js Overlay effect on hover with text Example

<!DOCTYPE html>
<html>

<body>

<div id="app">
    <div class="container">
      <div class="image-container" @mouseover="showOverlay" @mouseleave="hideOverlay">
        <img src="https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg" alt="Image" />
        <div class="overlay" v-if="show">
          <h2>Vue JS Overlay on hover</h2>
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>

.container {
      position: relative;
    }

.image-container {
      position: relative;
      display: inline-block;
    }

.image-container img {
      max-width: 100%;
      height: auto;
      display: block;
    }

.overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

.overlay:hover {
      opacity: 1;
    }

.overlay h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }

.overlay p {
      font-size: 16px;
    }
  </style>
</body>

</html>