[Phil]

Hello,

I’ve created a button with an image for the background, and the image zooms in when the mouse hovers over it. However, I now want to give this button rounded corners. I’m using an OpacityMask to get this effect, but I can’t set the size and aspect ratio of the source image. Could you advise how to enable the zoom effect? Below is some sample code:

import Felgo 3.0
import QtQuick 2.0
import QtGraphicalEffects 1.0

App {
    Item {
        id: button
        clip: true
        anchors.centerIn: parent
        width: dp(200)
        height: dp(200)

        Image {
            id: img
            source: "../assets/test.png"
            height: parent.height
            fillMode: Image.PreserveAspectFit
            anchors.horizontalCenter: parent.horizontalCenter
            visible: false
            Behavior on height {
                NumberAnimation {
                    duration: 500
                    easing.type: Easing.InOutSine
                }
            }
        }

        OpacityMask {
            anchors.fill: parent
            source: img
            maskSource: mask
        }

        Rectangle {
            id: mask
            anchors.fill: parent
            radius: 0.05*height
            visible: false
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: img.height = parent.height * 1.15
            onExited: img.height = parent.height
        }
    }
}

Thanks,

Phil

[GüntherFelgo Team]

Hi Phil,

I suggest to not animate the source image and height individually. I think it’s better to animate the parent item instead, which holds the mask along with the image.

Best,
Günther

[Phil]

Hi Günter,

Thanks for the suggestion, but I’m not sure how this would work in my case. Maybe I need to explain my issue a bit better. I want to achieve an effect like this: https://codepen.io/dwinnbrown/pen/kXEEAa, but with the button having rounded corners. The button should stay the same size, it is just the source image that would change.

Thanks,

Phil

[GüntherFelgo Team]

I see,

in this case, I would animate the image, but apply the mask to the overall button.

An easy way would be to directly apply the opacity mask to the parent, using the layer.effect property (it’s also less code for the effect then):

import Felgo 3.0
import QtQuick 2.0
import QtGraphicalEffects 1.0

App {
  Item {
    id: button
    clip: true
    anchors.centerIn: parent
    width: dp(200)
    height: dp(200)

    // apply roundned corners to button (not image)
    layer.enabled: true
    layer.effect: OpacityMask {
      maskSource: Rectangle {
        id: mask
        width: button.width
        height: button.height
        radius: 0.05*height
      }
    }

    Image {
      id: img
      source: "https://felgo.com/wp-content/themes/vplay/images/front-page/banner-qtc-designer.jpg"
      height: parent.height
      anchors.centerIn: parent
      fillMode: Image.PreserveAspectFit
      anchors.horizontalCenter: parent.horizontalCenter
      Behavior on height {
        NumberAnimation {
          duration: 500
          easing.type: Easing.InOutSine
        }
      }
    }

    MouseArea {
      anchors.fill: parent
      hoverEnabled: true
      onEntered: img.height = parent.height * 1.15
      onExited: img.height = parent.height
    }
  }
}

Best,
Günther