How to mirror and fade the stretched content of a div?-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:

<div >
    <image src="217_5_grayscalereversed.png"/>
</div>
.container {
    background-color: orange; // for debugging
    max-width: 100vw;
    min-height: 10px;
    padding: 10px;
    margin: 5px;
 }
 .container img {
    width: 100%;
    height: 139px;
 }

But trying to mirror the content of div fails:

<div >
    <image src="217_5_grayscalereversed.png"/>
</div>
.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);
}

The image (wxh: 17073x139 pixels):

How should I mirror the stretched content of this div ?

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>