CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseover
Adrian Halaburda
Adrian Halaburda

Reputation: 50

How can I make a fade transition with the background images

I have 5 buttons and when i pass my pointer o some of then, i want change the background image but with a fade effect.

HTML:

<body>
  <div id="content" class="row">
    <div class="large-4 center columns ">
      <a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
    </div>
    <div class="large-4 center columns">
      <a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
    </div>
    <div class="large-4 center columns">
      <a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
    </div>
    <div class="large-4 large-offset-2 center columns">
      <a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
    </div>  
    <div class="large-4 center columns end">
      <a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
    </div>
  </div>
</body>

Jquery:

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();

  $("#column1").mouseover(function(){
      $("body").css('background-image', 'url("img/dib1.jpg")');  
  });

  $("#column2").mouseover(function(){
      $("body").css('background-image', 'url("img/dib2.jpg")');
  });

  $("#column3").mouseover(function(){
      $("body").css('background-image', 'url("img/dib3.jpg")');
  });

  $("#columna4").mouseover(function(){
      $("body").css('background-image', 'url("img/dib4.jpeg")');
  });

  $("#column5").mouseover(function(){
      $("body").css('background-image', 'url("img/dib5.jpg")');
  });

</script>

The problem is when change the image, is so quickly, for that i want put a fade transition, tried put fadetoggle slow, but disappear all my content because use "body" for my selector.

Upvotes: 1

Views: 18728

Answers (5)

experimenter
experimenter

Reputation: 928

You can use CSS 3 transition property. Define class in your style sheet for example as follows:

.backgroundChanged
{
    background-image: your image;
    transition-property:background-image;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

And then apply this class programmatically in javascript when you need. Hope this helps.

Upvotes: 0

wrxsti
wrxsti

Reputation: 3504

Here is a little mock up I made. Its just a basis, but should be easily modifiable.

http://jsfiddle.net/sB8hU/

HTML:

<div id="content" class="row">
        <div class="large-4 center columns ">
          <a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
        </div>
        <div class="large-4 center columns">
          <a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
        </div>
        <div class="large-4 center columns">
          <a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
        </div>
        <div class="large-4 large-offset-2 center columns">
          <a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
        </div>  
        <div class="large-4 center columns end">
          <a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
        </div>
      </div>

<div class="bg1"></div>
<div class="bg2"></div>

jQuery:

$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
    var bgImage = $(this).data('bg');
    if( $('.bg1').is(':visible') ){
        $('.bg2').css('background-image', 'url(' + bgImage + ')');
        $('.bg1').fadeOut(200, function(){
            $('.bg2').fadeIn(200);
        });
    } else {
        $('.bg1').css('background-image', 'url(' + bgImage + ')');
        $('.bg2').fadeOut(200, function(){
            $('.bg1').fadeIn(200);
        });
    }
});

Upvotes: 1

Samuel Bolduc
Samuel Bolduc

Reputation: 19173

Unfortunately, this is not currently possible with "simple" CSS.

However, you could use a container (your web page) with position: relative and place your main div in it, with position: absolute and top: 0; left: 0. then add, at the same level as this div:

<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" /> 
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />

In your CSS :

img.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-out; /* could be another duration / transition effect */
  -webkit-transition: opacity 500ms ease-out;
  -moz-transition: opacity 500ms ease-out;
  -ms-transition: opacity 500ms ease-out;
  -o-transition: opacity 500ms ease-out;
}

img.bg-img.active {
  opacity: 1;
}

Then in your code, instead of changing the background-image property of "body", change the class of the desired images et add / remove active.

Upvotes: 0

MaKR
MaKR

Reputation: 1892

CSS3 is the easiest way. You just have to reassign the image in JavaScript as you already have, then putting this in the body tag will take care of the rest for you. Be sure to play with the timing to meet your needs. Disclaimer: this transition doesn't work in IE earlier than 10.

body {
   transition: background .5s ease-in-out;
   -moz-transition: background .5s ease-in-out;
   -webkit-transition: background .5s ease-in-out;
}

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16547

Use a absolute element and add background to it. Do it like this:

<body>
<div id="bg"></div>

And styles:

#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}

And follow your same trick. :D

Upvotes: 0

Related Questions