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.