How to create mirrored image effect with CSS single element

Question

I have an HTML element with a background image and want to create a mirror effect to the bottom, as if the image is reflected like this:

The optimal solution for me to create this reflection would be CSS only without using more elements than this single one and without using the image URL multiple times (due to maintenance reasons). I only found solutions like this with "complicated" HTML markup.

This is my code:

div {
  position: relative;
  background: url(https://i.sstatic.net/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.sstatic.net/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
}

<div></div>

Answer 1

You can indeed use the pseudo-elements :after and :before to first mirror the image using transform: scaleY(-1); and second overlay the mirrored image with a linear gradient going from a semi-transparent white rgba(255, 255, 255, 0.5) to non-transparent white #fff.

To not being forced to notate the image URL twice, just use background: inherit;.

div {
  position: relative;
  background: url(https://i.sstatic.net/P56gr.jpg) bottom;
  width: 300px;
  height: 200px;
}
div:after,
div:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 50%;
  bottom: -52%;
}
div:after {
  background: inherit;
  transform: scaleY(-1);
}
div:before {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
}

<div></div>

Note: You have to use vendor prefixes for support in different browsers.

Answer 2

Just add

transform: rotate(180deg);
-webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,.7)), to(rgba(0,0,0,1)));

Obviously nothing will be cross-browser 100% when doing stuff like this in css

div {
  position: relative;
  background: url(https://i.sstatic.net/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.sstatic.net/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
  transform: rotate(180deg);
  -webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)));
}

<div></div>