import QtQuick 2.0

Rectangle {
    width: 320
    height: 480
    Column {
        id: foo
        x: -width * (scale - 1) * (10/9) * (mouseArea.mouseX / width - 0.5)
        y: -height * (scale - 1) * (10/9) * (mouseArea.mouseY / height - 0.5)
        states: [
            State {
                name: ""
                PropertyChanges {
                    target: foo
                    scale: 1
                }
            },
            State {
                name: "zoomed"
                when: mouseArea.pressed
                PropertyChanges {
                    target: foo
                    scale: 10
                }
            }
        ]
        Behavior on scale {
            NumberAnimation { duration: 300; easing.type: Easing.InOutSine }
        }

        Repeater {
            model: 3
            Row {
                id: local
                property int _index: index
                Repeater {
                    model: 2
                    Item {
                        width: 80
                        height: 160
                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: 10
                            radius: index * 20
                            border.pixelAligned: local._index == 1
                            border.width: local._index == 0 ? 0 : 0.5
                            opacity: 0.5
                            color: "steelBlue"
                        }
                    }
                }
                Repeater {
                    model: 2
                    Item {
                        width: 80
                        height: 160
                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: 10
                            radius: index * 20
                            border.pixelAligned: local._index == 1
                            border.width: local._index == 0 ? 0 : 0.5
                            opacity: 0.5
                            gradient: Gradient {
                                GradientStop { position: 0.05; color: "lightsteelblue" }
                                GradientStop { position: 0.1; color: "lightskyblue" }
                                GradientStop { position: 0.5; color: "skyblue" }
                                GradientStop { position: 0.9; color: "deepskyblue" }
                                GradientStop { position: 0.95; color: "dodgerblue" }
                            }
                        }
                    }
                }
            }
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}