4

Does there exist some kind of jQuery fade into black effect withing a specific part of a picture. So it really colors the picture into becoming black? I do know about the canvas element, but it just doesn`t seem like a good solution to me, would be grateful with some help :)

user2097217
  • 419
  • 1
  • 9
  • 17

1 Answers1

7

applying an overlay to the picture ( an absolutely positioned DIV ), and adding opacity: 0 and background-color: black will make a transparent overlay. You can then animate the opacity to 1, basically "darkening" the image progressively.

Edit: here's a fiddle with a demo http://jsfiddle.net/FMSKf/

Nick Andriopoulos
  • 10,313
  • 6
  • 32
  • 56
  • I see, but what if I wanted to only fade a specific part of an image into a black color? Like a white dot to appear upon hover? – user2097217 Mar 12 '13 at 11:56
  • you then need to adjust the CSS for the overlay. In the provided example it's `top:0; left:0` (ie from topleft corner) with `width:100%; height:100%` (ie covers the full container). You can adjust it to anything and cover any part though. – Nick Andriopoulos Mar 12 '13 at 11:58
  • I see. Okey, I think I`ve got some information until further problems. I could get back to you, but until then I`ll give you a Green Checkmartk! ;) – user2097217 Mar 12 '13 at 12:01