css3 glossy gradient over image

css3 glossy gradient over image

by Jon Beebe

HTML

<div class="container">
    <div class="item"></div>
</div>

CSS

body {
    background: #eee;       
}
.container {
    position: relative;
    background: #ccc;        
    width: 400px;
    height: 300px;
}
.item {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    margin: 0 auto;
    top: 20px;
    
    background: #999;
    background-image: url(http://pattern.dk/pastel/static/demo/boy_avatar.jpg);
    background-size: auto 202px;
    background-position: center;
   
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.5);
}

.item:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, 0) 51%) no-repeat;
    box-shadow:25px 0 50px -25px white inset;
    z-index: 2;
}