JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
    <img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt="">
   
</div>

CSS

body{
padding:50px;
background:#222;    
}

.wrap{
width:400px;
margin:0 auto;
position:relative;
overflow:hidden;
}

.wrap>img{
display:block;
width:100%;
}

.wrap:before{
content:'';
position:absolute;
top:-35%;
left:-10%;
width:120%;
height:120%;
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,rgba(255,255,255,0.3)), color-stop(50%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 50%);
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 50%);
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 50%,rgba(255,255,255,0) 50%);
background: linear-gradient(-45deg,  rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
-webkit-transform:rotate(24deg);
-moz-transform:rotate(25deg);
-ms-transform:rotate(25deg);    
-o-transform:rotate(25deg);
}