How to fade out sides of images?

Question

When you make the browser wider, you will notice that the right and left side of images is fading out in black.

I need to apply the same feature on my gallery but have no idea. I have found the this >> link as well but its just a horizontal line not sure how to attach it to both side of images and make the same result as the link.

In the comments, ultranaut mentioned that I can apply the filter on images but the question is that if I apply it on the images how to adjust the size, because browser windows might be in different size and the pictures side should be adjustable to every browser size.

Answer 1

Here's one way to skin this cat:

HTML:

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt=""/>
</div>

CSS:

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

Personally, I'm not a huge fan of the (semantically) unnecessary fade div, and I'm sure there's probably a more clever way to do the same effect without it, but it'll work.

I only included the webkit prefixed rule, if you want to get legit you'd need to add the other vendor prefixes.

Fiddle here.

Update: If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

Less muss, less fuss: new-style fiddle with vendor prefixes and everything.

Answer 2

Using just CSS3, try a Vignette.

Verbatim code:

HTML:

<p class="vignette"><img src="image.jpg"></p>

CSS:

p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}