在图像上应用渐变

Question

这是JsFiddle。

我有一个转换后的图像，我想在其上添加渐变（黑色到透明）。

HTML：

<div class="contentwrap">
  <div class="perspectiveDiv">
      <img src="http://image.noelshack.com/fichiers/2014/34/1408372755-black-card.png"  class="img" />
  </div>
</div>

CSS：

.contentwrap {
    margin: 0 auto;
    max-width: 600px;
    height: 100%;
    display: table;
    padding-top: 150px;
}

.perspectiveDiv{
    perspective:750px; 
    position: relative; 
    left: 0; 
    top: 0;    
}

.img{
    position: absolute; 
    top: -152px;  
    left: 25px;
    transform:  rotateX(60deg); 
    max-width: 250px;  
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
    box-shadow: 0 60px 45px -20px rgba(0, 0, 0, 0.8);;
    -moz-border-radius: 15px;
    border-radius: 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1),  rgba(0, 0, 0, 0));
}

这是我需要的结果（用photoshop制作）：

我找到了如何在背景图像上应用渐变，但不是标准图像......

有可能做我需要的吗？

你能帮帮我吗？它可能非常简单，但我是初学者，我没有设法做到这一点......