How to pay off the sides of images?

Question

When you make the browser wider, you will notice that the right and left sides of the images disappear in black.

I need to apply the same function in my gallery, but I have no idea. I found this link →, but its just a horizontal line does not know how to connect it to both sides of the images and make the same result as the link.

In the comments, the ultranaut mentioned that I can apply a filter on images, but the question is, if I applied it on images, how to adjust the size, because browser windows can be of different sizes, and the side of images must be adjustable for each browser size.

Answer 1

Here is one way to throw 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 big fan of the (semantically) unnecessary div fade , and I'm sure there may be a smarter way to make the same effect without it, but it will work.

I have included the prefixed webkit rule, if you want to qualify, you will need to add prefixes from other providers.

Fiddle is here .

Update : If the image just serves as the background & mdash, as is the case in your related example - the gradient and image can be set in 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: a new-style violin with vendor prefixes and everything else.

Answer 2

Using only CSS3, try Vignette .

Wall 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: ""; }