JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Крутой ретро-эффект</h2>
<div class="retro">
	<img src="http://news.tumar.fm/timthumb.php?src=http://news.tumar.fm/uploads/posts/2013-04/1365241000_shutterstock_97614038.jpeg&h=300&w=1500" alt="Retro is cool!" />
</div>

CSS

body {
    margin: 20px 50px;
}
.retro {
	-webkit-box-shadow:  inset 0px 0px 100px rgba(0,0,20,1);
	box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
	background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	background: -moz-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -moz-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	background: -o-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -o-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	background: -ms-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -ms-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	display: table;
}

.retro img { 
	-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
	position: relative; 
    z-index: -1; 
    display: block;
}
.retro:hover {
	background: none;
}
.retro:hover img {
	-webkit-filter: none;
}