Geek Answers Handbook

Fade in the background image of the div (and not in the body or disappearing from the background color)

Very simple, I'm trying to fade into the background image of a div; I saw how this was done with two divs and effectively showed (for example: faux fading in) the background image, fading the background color of the div covering the background image. This will not solve my problem.

The above solution works if the “mask” has the same solid color as the background color of the body. In my case, the body background is a textured image, so this will not work. I could set the “mask” div to the same background image as the body, but having a z-indexed div looks like overkill.

tl; dr I have a div somewhere in the body - how do I fade into the background image? Thanks!

+4
source share
3 answers

You need two divs. The first color has no background color, and the second has a background image. Fade out the second (Asherlc suggested the way), and you're done.

.body {background-image:url(bg.png)} .toFade {opacity=1 ... alternatives } ... <div> <div class=toFade style="background-image:url(img.png)"> <!-- possible content --> </div> </div>
+3
source

I don’t know how much I know. For this you need 2 images / elements. You can use jquery / jquery ui toggleClass with duration.

See examples here:

How to add fadeIn effect when changing background image using .css in jQuery

jQuery li with image shading in background (disappears in class)

+2
source

Ok! It took me a while to resolve this “challenge”, and I think I came up with an idea close to your request! Despite the fact that you want FadeIn only a background image with only one div, I created a jQuery script using the clone () method .

The only thing that needs to be done is that you want to fade in some text too! Take a look at my script and let me know if this helps!

http://jsfiddle.net/7z8vB/

+1
source

More articles:


All Articles