I'm trying to do something like this:
I think it could be done using background image and another image (mask) above it with a transparent center. But is it possible to do the same with pure css?
2 Answers
Whilst you can't apply a box-shadow directly to an image you could apply it with a :before or :after
.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);
} <div class="shadow">
<img src="" />
</div>Yess it's possible like this:
.img {
border:1px solid black;
}
.img:hover {
border: none;
box-shadow: 0 0 10px black inset;
}
