The partial gradient of <img>

Well, you can't offer the best option, rather stupid.
to impose a layer with APG (gradient with a transparent background) on top of a layer of this picture.
\r
CSS z-index and all.
the picture with the gradient you need the width by the height to 1 pixel.
Repeat it on the y axis.

You can create a translucent PNG with the gradient (or a range of files) and overlay on top of the marked desired class of images means JS when the page loads.

here somehow so
\r

\r

\r\r\r
\r

#image{ width: 159px; height: 110px; position:relative; } .overlayed{ display:block; position:absolute; top:0; left:0; width: 100%; height:100%; background: #FFF; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* firefox */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* ie */ } 

When using CSS, you can use the mask property in a pair of SVG. Examples and descriptions: developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content