Partial gradient for

Question

css

There is an image tag


How to achieve such an effect using CSS / JS without editing the image itself?

Answer 1

Well, I can offer not the best option, rather even stupid.
put a layer with png (gradient with a transparent background) on top of the layer of this image.
CSS z-index and all.
a picture with a gradient of the width you need and a height of 1 pixel.
You repeat it along the y-axis.

Answer 2

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

Answer 3

something like that

<div id="image">
<img src="0ff35a09.jpg" width="159px" height="110px" alt="qq" class="overlayme" />
<span class="overlayed"></span>
</div>

#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 */
}

Answer 4

With CSS, you can use the mask property in conjunction with SVG. Examples and descriptions: developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content