Background images opacity fades out the whole element

Question

I have a div element with background image, I'm trying to fade in and out background images with Jquery. By now the function works well but it fades out the whole div and not only the background as I wish.

function rentPics()
{
    $('#d2').css('background-image','url(' + mazdaArr[1] + ')');
    interID=setInterval (changeImage,3000);
}

function changeImage()
    {
        $('#d2').animate({opacity: 0}, 1500, function(){
        $('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
        }).animate({opacity: 1}, 1500);
        x++;
        if (x==mazdaArr.length)
        {
            x=1;
        }
    }

here is told how to do it http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements — Bernhard, Nov 12 '13 at 22:08

score 2 · Accepted Answer · edited May 23 '17 at 12:00

If you're looking for a simple and lightweight cross-fading, use the CSS transition. This won't affect the text inside the element, the border and the box-shadow.

transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;

Check out this fiddle.

It's supported by Chrome, Safari and Opera but I'm not quite sure with Firefox and IE

If you have a larger list of images to loop. You may also want to consider caching the images URL first because I noticed some flickering/blinking on first use. Check solutions here - Preloading CSS Background Images

score 0 · Answer 2 · answered Nov 12 '13 at 22:09

0

The fade in applies opacity to the entire div with the background image incluide, you can do this creating a layer behind the div that you want apply the fade in and fade out.

answered Nov 12 '13 at 22:09

Danny Telecaster

11
2

score 0 · Answer 3 · answered Nov 12 '13 at 22:09

Instead of using jQuery to animate opacity, you could have it add or remove a class. Then add transitions to your CSS, which should produce your desired result. Something like below might work. You can see the documentation of CSS transitions here. The only drawback is IE, per usual.

.element {
  -webkit-transition: ease 0.2 all;
  -moz-transition: ease 0.2 all;
  -o-transition: ease 0.2 all;
  -ms-transition: ease 0.2 all;
  transition: ease 0.2 all;
}

score 0 · Answer 4 · answered Nov 12 '13 at 22:15

Use a relative container with an absolute positioned overlay. Your HTML should look like this:

<div id="d2" class="image-wrapper">
  <img src="/img/1.jpg" />
  <div class="overlay"> your text goes here </div>
</div>

... and your CSS:

.image-wrapper {
    position: relative;
}
.image-wrapper .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.image-wrapper img {
    display: block;
}

Now you can change the opacity of your image without changing the content within the ovelay.

I'm not sure you got me right, I dnt have any text I just want that the fade affect wont take the border, box shadows etc.. with it. I want only the image to change... — Juvi, Nov 12 '13 at 22:35

Background images opacity fades out the whole element

4 Answers4