How to feather the edges of an image using CSS


Tags: html,css,image,insets

Problem :

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!



Solution :

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.

See this example of it in action.


    CSS Howto..

    How can i apply css rules dynamically in a div after the user enters the rules [closed]

    How to use background css for an image not in the Content or Resource folder

    Show overlay fullscreen div then hide it by clicking on it

    How to mask an SVG within a div?

    How to wrap a vertical overflow horizontally in css?

    Javascript (shopping cart) showing up under other content?

    meteorjs how to import a wrapbootstrap theme

    How can change the style of
      tag in CSS

    How to center the boxes as shown?

    How to refine CSS media types and properties?

    How to draw a half circle (border, outline only) [closed]

    How to create Curved & Overlapping Menu Tabs in CSS

    show a div over another when resizing on hover

    How do I align an image within a pan/hover border/box?

    JQM, CSS: How to change disabled fields css?

    How to overlap two div with css

    How can I make a fixed background image not stay fixed on scroll?

    how to give css only the 1st label span?

    How do I expand this CSS list?

    How to vertically center in yui-pure-css?

    How to remove css from DOM

    Css: How to format and remove outlining borders of table on left and right side?

    How to dynamically adapt the layout by using only CSS

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    how to create arrow down/up in css

    How to properly align rows with bootstrap

    How to force resize inside iframe?

    How to convert bullet points into horizontal list?

    How could I make a menu dropdown on click

    Issue with Hide / Show Jquery on fixed positioned div