arnoldc
6/23/2013 - 11:59 AM

css: inset shadow on img

css: inset shadow on img

.vignette {
        -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
        -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.4);
        box-shadow:         inset 0px 0px 85px rgba(0,0,0,0.4); 
        line-height: 0;         /* ensure no space between bottom */ 
        display: inline-block;  /* don't go wider than image */
}

.vignette img {
        position: relative;
        z-index: -1;            /* position beneath */
}


/*
<div class="vignette">
    
      <img src="http://1.bp.blogspot.com/-ou03DFGGjMY/TgNstGfyt_I/AAAAAAAAAOo/xyOqdHJNHY4/s1600/10.jpg" alt="">
    
  </div>
   

*/