JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div class="box">
    <div class="vignette"></div>
    <img src="http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg" />
</div>

CSS

.box {
    position: relative;
    width: 95%;
    margin: 50px auto;
}
.box > img, .box > div {
    max-width: 100%;
}
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(33%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
}