JSFiddle - React, Tailwind, and code Playground

by Виталий Инчин

HTML

<div class="img">
    <div class="col"></div>
</div>

CSS

.img{
    width: 300px;
    height: 300px;
    background: url("http://zhaba.ru/storage-10667/images-1061/c34bb4b639ee70deb51e65f17e28e20d_51061.jpg") center;
    position: relative;
}

.img:after{
    content: '';
    width: 100px;
    height: 150%;
    background: white;
    position: absolute;
    left: -60px;
    top:-50px;;
    transform: rotate(20deg);
}

.img:before{
    content: '';
    width: 100px;
    height: 150%;
    background: white;
    position: absolute;
    right: -60px;
    top:-50px;;
    transform: rotate(-20deg);
}

.col{
    width: 100%;
    height: 100%;
    background: blue;
}

.col:hover{
    opacity: 0;
}