confini Blur sull'immagine tramite CSS

Question

che sto cercando di fare qualcosa di simile:

penso che potrebbe essere fatto immagine di sfondo e un'altra immagine (maschera) di cui sopra utilizzando con un centro trasparente. Ma è possibile fare lo stesso con puro css?

Answer 1

Anche se non è possibile applicare un un'immagine box-shadow direttamente a voi potrebbe applicare con un :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 è possibile così:

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