CSS3 Image Gloss Effect - Snippet

Preview
HTML
CSS
JS

<div>
	<h2>Original</h2>
	<figure>
		<img src="http://cssdeck.com/uploads/media/items/5/5ExdPFa.jpg">
	</figure>
</div>

<div>
	<h2>With Effect</h2>
	<figure class="gallery-icon">
		<img src="http://cssdeck.com/uploads/media/items/5/5ExdPFa.jpg">
	</figure>
</div>

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
	background: #f3f3f3;
}

div {
	margin: 20px auto;
	width: 320px;
	overflow: hidden;
	padding: 0 10px 10px;
}
figure {
	margin: 0;
}

.gallery-icon:before{
    content:'';
    position:absolute;
    width:130%;
    height:60%;
    top:-15%; right:-5%;
    background: rgba(255,255,255,0.3);/*opera don't support gradient yet*/
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.1));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.1));
    background: -o-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.1));
    background: -ms-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.1));
    background: linear-gradient(to bottom, rgba(255,255,255,0.1),rgba(255,255,255,0.1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 );
    
    /* Webkit */
    -webkit-transform:rotate(10deg);
    -webkit-border-bottom-left-radius: 200px 20px;
    -webkit-border-bottom-right-radius: 200px 10px;
    -webkit-border-top-right-radius: 5px 100px;
    /* Firefox */
    -moz-transform:rotate(10deg);
    -moz-border-radius-bottomleft:200px 20px;
    -moz-border-radius-bottomright:200px 10px;
    -moz-border-radius-topright:5px 100px;
    
    -ms-transform:rotate(10deg);
    -o-transform:rotate(10deg);
    /* CSS3 */
    transform:rotate(10deg);
    border-bottom-left-radius:200px 20px;
    border-bottom-right-radius: 200px 10px;
    border-top-right-radius:5px 100px;
}

.gallery-icon{
    position:relative;
    overflow:hidden;
    border:6px solid #FFF;
	float: left;
    -webkit-box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
    -moz-box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
    box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
}

.gallery-icon img {
	/* Fixing Mysterious Gap issue */
	vertical-align: bottom;
	/* display: block; - will also fix */
}