<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));
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.