HtmlCSS Reflect one image in two different directions trans
Html/CSS: Reflect one image in two different directions , transparent (to the right of it and below). Image for reference: http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg.
Solution
<!DOCTYPE html>
 <html>
 <head>
 <style>
 #imgH {
     -moz-transform: scaleX(-1);
         -o-transform: scaleX(-1);
         -webkit-transform: scaleX(-1);
         
 }
 #imgV {
     -moz-transform: scale(-1, -1);
     -o-transform: scale(-1, -1);
     -webkit-transform: scale(-1, -1);
     transform: scale(-1, -1);
         
 }
 #imgT {
 opacity : 0.5;
 }
 </style>
 </head>
 <body>
<img id=\"imgH\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\">
 <img id=\"imgV\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\">
 <img id=\"imgT\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\" style=\"linear-gradient(to right, blue, white);\">
</body>
 </html>

