.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); }