html - :画像にグラデーションを適用しない前に?

Question

私はしばらくこれに取り組んできましたが、なぜ機能しないのか理解できません。要約すると、画像の左上と右上にソフトなグラデーションを重ねるだけです。しかし、私はそれを機能させることができません。何か案は？

<article class="main-home">
<div class="header">
    <div class="crumb">Placehold</div>
</div>

<div class="body">
    <img src="http://placehold.it/350x150" class="block_img"/>
</div>

そしてcssも

article.main-home
{
    overflow: hidden;
}
article.main-home .body .block_img
{
    float: left;
    width: 50%;
}
article.main-home .body .block_img:before 
{
    background-image: -moz-linear-gradient(left center , rgba(255, 0, 85, 0.2) 0px, rgba(255, 0, 85, 0) 25%);
    background-size: 100% auto;
    content: "";
    display: block;
    height: 100%;
    left: 0 !important;
    position: absolute;
    top: 0 !important;
    width: 100%;
}

ここにもアクティブな jSFiddle があります: http://jsfiddle.net/J4Dgm/4/ たくさんの人に感謝します!