HTML/CSS - create alpha mask over image

By : sa125

I'd like to create an effect in a site I’m building where an image is masked by an overlay. The overlay should create a “fade out” effect — I don’t actually want anything animated, but the overlay should make the image look as if it’s fading to the background colour at the edges.

Something like this:

I prefer to do this with CSS/HTML/JS - not images. Any thoughts on where to start? Thanks.

By : sa125


The jQuery animate function (with opacity) should/may be able to handle that, though antyrat's answer should work as well if you simply fadein the overlay.

By : smdrager

Start with jQuery. For example see fadeIn function.

For static alpha mask over image use opacity css property:

.myimage {
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
By : antyrat

Ah — based on your comment on antyrat’s answer, your best bet is to create a PNG image that contains the effect (i.e. a semi-transparent white shape), and position it over the top of your actual image using CSS (position:absolute and z-index will be involved).

You can’t currently create non-square shapes using HTML and CSS alone.

This video can help you solving your question :)
By: admin