Blur graniczy z obrazu za pomocą CSS

Question

Próbuję zrobić coś takiego:

myślę, że można to zrobić za pomocą obrazu tła i innego obrazu (maskę) powyżej z przezroczystego środka. Ale czy można zrobić to samo z czystym css?

Answer 1

Podczas gdy nie można zastosować box-shadow bezpośrednio do obrazu można stosować go z :before or :after

HTML

<div class="shadow"> 
      <img src="http://lorempixel.com/400/200/" /> 
    </div> 

CSS

.shadow 
{ 
    display:block; 
    position:relative; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

.shadow:before 
{ 
    display:block; 
    content:''; 
    position:absolute; 
    width:100%; 
    height:100%; 
    -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
} 

Answer 2

Yess jest możliwe tak:

.img { 
border:1px solid black; 
} 
.img:hover { 
border: none; 
box-shadow: 0 0 10px black inset; 
}