Flickr Tag-After

by apaul34208

HTML

<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />

CSS

.slick-shadow {
    position: relative;
    background: #fff;
    padding:5px;
}
.slick-shadow:before, 
.slick-shadow:after {
    z-index: -1; 
    position: absolute; 
    content: "";
    bottom: 15px;
    left: 10px;
    width: 44%; 
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 16px 10px rgba(0,0,0, 0.4);   
    -moz-box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    -webkit-transform: rotate(-3deg);    
    -moz-transform: rotate(-3deg);   
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
} 
.slick-shadow:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

JavaScript

$(function() {
    $('img').wrap('<div class="slick-shadow" />');
});