Отражение для любых картинок через SVG маску
|
1 2 3 4 |
svg.image { overflow: visible; max-width: 500px; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
<svg class="image" viewBox="-320 -160 500 120"> <linearGradient id="g" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#fff" stop-opacity=".1"></stop> <stop offset="100%" stop-color="#fff" stop-opacity=".8"></stop> </linearGradient> <mask id="m" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#g)"></rect> </mask> <image id="img" x="-25%" y="-95px" width="500" height="120" preserveAspectRatio="xMidYMid slice" xlink:href="ССЫЛКА_НА_КАРТИНКУ"></image> <use xlink:href="#img" y="-50" transform="scale(1 -1)" mask="url(#m)"></use> </svg> |
