Gradient over image

tipo theverge

by hugosolar

HTML

<div class="img-cont">
    <img src="http://cdn1.sbnation.com/entry_photo_images/9706211/potluck_2_2_large_extra_large.png">
    <div class="img"></div>
</div>

CSS

.img-cont {
    position: relative;
}
.img:before {
    background-image: linear-gradient(to right bottom, #002F4B, #DC4225);
    background-size: 100% 100%;
    box-shadow: 0 0 30px 0 rgba(64, 83, 98, 0.5) inset;
    content: "";
    height: 300px;
    left: 0;
    max-height: 350px;
    max-width: 450px;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 450px;
    z-index: 10;
}