Edit in JSFiddle

.mirror-image {
    /*for example purposes only*/
    float: left;
    margin: 10px;
}
.mirror-image > .reflection {
    position: relative;
}
.mirror-image > .reflection > img,
.mirror-image > .reflection > span {
    display: block;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.mirror-image > .reflection:after {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: transparent;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}