<div class="reflection">
  <figure class="reflection-figure" id="css-element">
    <img class="reflection-image" src="https://unsplash.it/300/215?image=84" alt="">
    <figcaption class="reflection-text">San Francisco, CA</figcaption>
  </figure>
</div>
<svg height="0">
  <mask id="mask">
    <rect width="100%" height="215" fill="url(#gradient)"/>
    <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient">
      <stop offset="50%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </mask>
</svg>

.reflection {
  width: 300px;
  height: 215px;
  margin: 50px auto;
}
.reflection-figure {
  position: relative;
  height: 215px;
  margin: 0;
}
.reflection-text {
  font: 1.2em sans-serif;
  position: absolute;
  right: 0; bottom: 20px;
  margin: 0;
  padding: 10px;
  background: rgba(255,255,255,.6);
  color: #000;
  transition: padding .3s;
}
.reflection:hover .reflection-text {
  padding-right: 50px;
}

/* reflection the standard way (detecting support) */
@supports (background: -moz-element(#css-element)) {
  .reflection::after{
    content: '';
    position: absolute;
    width: inherit; height: inherit;
    background: -moz-element(#css-element);
    transform: scaleY(-1);
    mask: url('#mask');
    opacity: .3;
  }
}

/* reflection the old WebKit way */
.reflection {
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3));
}