Search code examples
javascriptvue.jsvuejs2quasar-frameworkquasar

How to display some info when you hover on image using Quasar framework and Vue.js

I need to toggle the word "show" when hovering on it

 <div class="col-3">
   <q-img src="../assets/doctors/doctor-08.jpg">
      <div class="absolute-full text-subtitle2 flex flex-center">
            Show
      </div>
    </q-img>
 </div>
Solution

  • You can do it in CSS. Advantage of this approach:

    1. You don't clutter your template and javascript with unnecessary logic.
    2. You can add CSS transition effect.

    e.g.

     <div class="col-3">
   <q-img src="../assets/doctors/doctor-08.jpg" class="my-img">
      <div class="absolute-full text-subtitle2 flex flex-center my-text">
            Show
      </div>
    </q-img>
 </div>

.my-img .my-text {
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.my-img:hover .my-text {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}