Vue Js Overlay effect on hover with text Example: you can create an Vue Js overlay effect on hover with text by using CSS and Vue’s event handling capabilities. First, define a CSS class that sets the overlay properties, such as background color and opacity. Then, create a Vue component with a text element and apply the CSS class to it. Use Vue’s @mouseover and @mouseleave event handlers to toggle a data property that determines whether the overlay effect should be displayed. Within the template, conditionally apply the CSS class based on the data property. This way, when hovering over the text, the overlay effect will be displayed, and it will disappear when the mouse leaves the element.

How can I create an Vue Js Overlay effect on hover with text Example?

This code snippet demonstrates the implementation of an Vue Js Overlay effect on hover with text . The code defines a Vue app with a data property called “show,” which is initially set to false. Within the template, there is a container with an image and a div element with a class of “overlay.”

The overlay is only displayed when the “show” property is true.

Two event listeners are added to the image container: @mouseover triggers the method “showOverlay,” and @mouseleave triggers the method “hideOverlay.” These methods update the value of the “show” property accordingly, showing or hiding the overlay based on mouse events.

The overlay contains a heading and a description, which can be customized as needed.

Vue Js Overlay effect on hover with text Example

 <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>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        showOverlay() {
          this.show = true;
        },
        hideOverlay() {
          this.show = false;
        }
      }
    });
    app.mount('#app');
  </script>

Output of Vue Js Overlay effect on hover with text Example

Createing an Vue Js Overlay Effect on Hover with Text – Css code

This is an example of creating an Vue Js Overlay Effect on Hover with Text. The code sets up a container with an image and an overlay. The overlay is initially hidden with zero opacity and transitions to full opacity on hover.

The overlay contains text elements, such as an h2 heading and a paragraph. The effect is achieved by positioning the overlay absolutely and adjusting its opacity using CSS transitions.

Vue Js Overlay effect on hover with text Example – Css Code

#app {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .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;
    }