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>

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/l

Get Help Now

Submit a Take Down Notice

Tutor
Tutor: Dr Jack
Most rated tutor on our site