I'm trying to blend out an image using jQuery or CSS (or both, of course.) Given the below HTML, is there any way to do this? I've found a few options but they seem to require a fixed width, which I won't have as these images are dynamically driven.
<div class="sevencol last">
<img class="rotator_image" alt="This is an image." src="/photo.jpg">
Something like this is what I had in mind:
Best How To :
Here is one solution that uses alpha gradients, not white gradient.
The idea is to mask a gradient with an image. Tested with Chrome 43 on Win. Other browers might require SVG fallbacks.
-webkit-gradient(linear, left center, right center,
<header>You can see the background through<br>the image gradient</header>
<img src="http://usiter.com/uploads/20131007/+priroda+more+voda+volna+5955363973.jpg" />