title: How to mask a list view in qml?
body: <p>I have a list view which need to be masked by an image. 
  Because am using a highlight component whose width need to be reduced according to the scrolling.
  Is it possible with this code ? If anything wrong in this please suggest me some methods.</p>
  
  <pre><code>Item{
          id: test
          x: 0
          y: 0
          width: 1920
          height: 720
  
  
          ListView {
              id: source_list
              x: 0
              y: 0
              width: 600
              height: 720
              spacing: 40
              model: mediaSongsModel
              delegate: mediaSongsDelegate
              focus: true
              interactive: true
              highlightFollowsCurrentItem: true
              highlightMoveDuration: 0
              highlight: highlightBar
              snapMode: ListView.SnapOneItem
              preferredHighlightBegin:260/scaleFactor
              preferredHighlightEnd: 260/scaleFactor
              highlightRangeMode : ListView.ApplyRange
  
          }
  
          layer.enabled: true
          layer.effect: OpacityMask {
  
              maskSource:Item {
                  width: 100
                  height: 500
  
                  Image{
                      id :crop
                       x: 0
                       y: 0
                       width: 600
                       height: 720
                       source :"image/bg.png"
  
                  }
  
              }
  
          }
  
      }
  </code></pre>