How to highlight image on mouse hoover QML

Question

I'm new to QML and I am trying to highlight an image on mouse hoover. I have a row of movie images, like this:

Here is my code for image number 4 (tarzan):

Rectangle{
   id:rect4
   width: parent.width/5-row.spacing/5
   height:parent.height
   color:'transparent'
   Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onClicked:tarzan.forceActiveFocus()
       }

I tried different ways, but nothing happens. Any ideas? Help would be appreciated.

Answer 1

There are 2 ways to do this if you are using the qt quick version 2.15

import QtQuick 2.15

you can use the HoverHandler object something like this

Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       HoverHandler{
          onHoveredChanged: {
              if(hovered){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }

      }

if you are using qtquick anything below 2.15 then your mousearea object should look something like this

Then it would be something like this the mouse area code

MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onContainsMouseChanged: {
              if(containsMouse){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }
           onClicked:tarzan.forceActiveFocus()
       }