I am trying to achieve a feathered effect on the edges of an image within an unordered list that contains 3 list items. Each list item has an image and 3 text-containing divs. I am looking for a CSS-only solution to achieve this effect.
Currently, my website located here has a feathered effect using the provided HTML for the image. However, the effect covers the entire image rather than just the edges. I am looking to have a strong feathered effect on the very edges of the image that fades out towards the center, spanning approximately 50px on all sides.
Here is the HTML code:
<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>
And the CSS code:
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: "";
}
I have tried using an inset box shadow of 50px, but it is barely noticeable, and 180px feathers the entire image. How can I achieve a strong feathered effect on the edges that fades towards the center?
Thank you!