How to mirror and fade the stretched content of a div? (anything better than -webkit-box-reflect?)-CodePudding

There are numerous examples of mirroring but in this case, mirroring a stretched image inside a div container does not work with the usual :after { background: inherit; transform: scaleY(-1); }

This is my base:

.container {
    background-color: orange; // for debugging
    max-width: 100vw;
    min-height: 10px;
    padding: 10px;
    margin: 5px;
 }
 .container img {width: 100%; height: 139px;}

<div >
    <image src="https://i.stack.imgur.com/cz4cm.jpg"/>
</div>

But trying to mirror the content of div fails:

.container2 {
    position: relative;
    // background: url(217_5_grayscalereversed.png) bottom;
    // can't be used because I'm stretching horizontally the image
    max-width: 100vw;
    height: 139px;
    margin: 10px;
}
  .container2 img {width: 100%; height: 139px;}

  .container2:after,
  .container2:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 50%;
  bottom: -52%;
}
.container2:after {
  background: inherit;
  transform: scaleY(-1);
}
.container2:before {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
}

<div >
    <image src="https://i.stack.imgur.com/cz4cm.jpg"/>
</div>

The image (wxh: 17073x139 pixels):

1. How should I mirror the stretched content of this div ?

With another attempt, using -webkit-box-reflect, I have a good result (bottom with Edge) except with few browsers (firefox, top):

.container {
    position:relative;
    max-width: 100vw;
    min-height: 10px;
 }
 .container img {width: 100%; height: 139px;}
.overlap {position:absolute; top:0; left:0; }
.ball { animation: an 4s 4s 3 alternate ease-in-out forwards;}
@keyframes an {
    0% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(100px); }
}
.bag {background-color: aliceblue; padding: 5px;}
.original {
    -webkit-box-reflect: below 0px linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
.reflection {
    transform: scaleY(-1);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
}

<div >
    <div >
        <image src="https://i.stack.imgur.com/cz4cm.jpg" />
        <svg viewbox="0 0 200 70" width="100vw" height="139px" >
            <line  x1="0" y1="0" x2="0" y2="139" style="stroke:rgba(223, 0, 0, 0.993);stroke-width:1" />
        </svg>
    </div>
    <div ></div>
</div>

2. What alternative with better browser support do I have to achieve a similar result ?

CodePudding user response：

sorry, but i'm not sure on what you want to do. If you just want to make an axial symmetry along the horizontal axis, you should just use scaleY(-1) on the second div...

I saw you put pseudo elements before / after but I don't understand the purpose.

Try to be more precise, or give us an image (photoshoped) of the desired result and i'll edit my answer, if I can :D

.container {
    background-color: orange; // for debugging
    max-width: 100vw;
    min-height: 10px;
    padding: 10px;
    margin: 5px;
}

.container img {
    width: 100%;
    height: 139px;
 }

.reversed {
   background: blue;
   transform: scaleY(-1);
}

<div >
    <img src="https://i.stack.imgur.com/cz4cm.jpg"/>
</div>

<div >
    <img src="https://i.stack.imgur.com/cz4cm.jpg"/>
</div>

CodePudding user response：

use transform: scaleY(-1); on the img

.container {
    background-color: orange; // for debugging
    max-width: 100vw;
    min-height: 10px;
    padding: 10px;
    margin: 5px;
 }
 .container img {
    width: 100%;
    height: 139px;
    transform:scaleY(-1);
 }

<div >
    <img src="https://i.stack.imgur.com/cz4cm.jpg"/>
</div>