How to do an opacity gradient in an image?

Question

I have implemented a cover flow similar to Itunes. But there is still one thing that I can't solve, even after researching and reading the documentation... I have the following result, but I would like to display only half of the reflection.

I have found the following StackOverflow post : How do I make a gradient opacity in an image - QML which is very similar to what I would like to achieve. Except that as my background is a gradient, I can't select the white color (or any plain color for the last GradientStop element in the solution code offered as solution).

Here is my code so far:

Image {
    id: rectDelegate
    anchors.fill: parent
    source: images[index % images.length]
}
ShaderEffectSource {
    id: reflection
    sourceItem: rectDelegate

    y: sourceItem.height
    width: sourceItem.width
    height: sourceItem.height

    transform: [
        Rotation {
            origin.x: reflection.width / 2
            origin.y: reflection.height / 2
            axis.x: 1
            axis.y: 0
            axis.z: 0
            angle: 180
        }
    ]
    visible: reflection_visible
}


Rectangle {
    anchors.fill: reflection

    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "#55ffffff"
        }
        GradientStop {
            // This determines the point at which the reflection fades out.
            position: 1
            color: "#ffffff"
        }
    }
    visible: reflection_visible
}

I tried to embed the ShaderEffectSource element inside a transparent rectangle whose height would be half of the reflection height and to clip the ShaderEffectSource inside, but the reflection wouldn't appear :/

Here is the code :

    Rectangle {
    anchors.top: rectDelegate.bottom
    color: "transparent"
    width: rectDelegate.width
    height: rectDelegate.height - 300
    visible: reflection_visible
    clip: true
    border.color: "yellow"
    ShaderEffectSource {
        id: reflection
        sourceItem: rectDelegate

        y: sourceItem.height
        width: sourceItem.width
        height: sourceItem.height

        transform: [
            Rotation {
                origin.x: reflection.width / 2
                origin.y: reflection.height / 2
                axis.x: 1
                axis.y: 0
                axis.z: 0
                angle: 180
            }
        ]
        visible: reflection_visible
    }
}

Any idea would be welcome :) I tried to make my post as clear as possible but if there is something missing for understanding, please, ask :)

I am a little distracted to understand these things, you could place the input image and another of the output image you want. :-) — eyllanesc

Milad Karimi Milad Karimi · Accepted Answer · 2019-01-22T06:55:32

read this post: How do I make a gradient opacity in an image? - QML or you can use Canvas type to draw your image with transparent gradient , but the proper way is the first one.

How to do an opacity gradient in an image?

1 Answers