I've been working on this for a while and I can't understand why it isn't working. In summary it's meant to just overlay a soft gradient over the image in the top left and right. However I can't get it to work. Any ideas?

```
<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>

```

and the css is also

```
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%;
}

```

I've got an active jSFiddle here too: <http://jsfiddle.net/J4Dgm/4/>
Thanks a bunch guys!