JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="holder">
<img src="http://www.hloe.co.uk/city.jpg">
</div>
<div class="text">
<img src="http://www.hloe.co.uk/city.jpg">
This is some text
</div>
<div class="holder">
<img src="http://www.hloe.co.uk/city.jpg">
</div>
<div class="text">
<img src="http://www.hloe.co.uk/city.jpg">
This is some text
</div>CSS
.holder {width:300px;height:300px;}
.holder img {width:300px;height:300px;display:block;}
.text {width:300px;overflow:hidden;position:relative;color:#000;padding:20px;}
.text img {width:300px;position:absolute;left:0;top:1px;z-index:-100;;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.3)));
}