How to feather the edges of an image using CSS

Question

I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS.

My site found here currenly has a feathered effect by using the following html for the image. However it seems to make the whole image feathered, instead I only need the very EDGES to be strong feathered, and then become less feathered as it spans approx. 50px towards the center on all sides of the image.

HTML:

<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>

CSS:

p.vignette {
  position: relative;
}

p.vignette img {
 display: block;
 width:80%;
margin-left:auto;
margin-right:auto;
 margin-top:6%;

}

p.vignette:after {
 -moz-box-shadow: inset 0 0 180px #defeec;
 -webkit-box-shadow: inset 0 0 180px #defeec;
 box-shadow: inset 0 0 180px #defeec;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

You can see I'm using an inset box shadow of 180px but this makes the whole image feathered slightly, and if I use say 50px it is barely noticeable at all! How do I make just the edges strongly and then fading into weaker towards the center?

Thank you!

Answer 1

You need to change some stuff around to get this to work. First, take inline-block off the <a class='divLink'> tag. Then try the following:

.vignette {
    width: 80%;
    margin: 1em auto;
    box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
}

Then use the following html (and scrap the <img> tag)

<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>

Of course, you could also put the background-image rule inside the css block, but sometimes declaring a background image inline makes a lot more sense, especially if you expect to have a number of photographs or similar.