FFB FFB - 2 months ago 13
HTML Question

jquery different image smooth hover with background on all browsers

I am trying to make an image hover with background behind.

The problem is that this is not working smooth on all browsers. I want the background immediately hover when the mouse enters the image. how can i make this smooth and work on all browsers?

HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 portfolio" id="work">
<div class="container">
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#nieuwecreatie">
<img src="image/nieuwecreatie.jpg" alt="nieuwecreatie" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#avpro">
<img src="image/avpro.jpg" alt="avpro" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#fuxing">
<img src="image/fuxing.jpg" alt="fuxing" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6 hidden-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
</div>
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6 visible-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#beneluxtaxi">
<img src="image/benelux-taxi.jpg" alt="benelux-taxi" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#intergroep">
<img src="image/intergroep.jpg" alt="intergroep" class="transition"/>
</a>
</section>
</div>
</div>
<div id="hovercontent" class="transition"></div>
</div>


CSS:

.transition{transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;}
.portfolio{padding:150px 0; position:relative;}
.portfolio #hovercontent{position:absolute; top:0; left: 0; width:100%; height:100%; background-size: 100% !important; z-index:-999; opacity: 0.4;}
.portfolio section{opacity: 0; margin-bottom:20px;}
.portfolio section img{width:100%; position: relative;}
.portfolio section .item-layer{display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; text-align: center; padding-top:100px; font-family: BebasNeue; font-size: 2em; color:white;}
.portfolio section img:hover{margin:-10px 0 0 0;}


jQuery:

//load bg images
$('#hovercontent').fadeOut();
if(window.location.hash || !window.location.hash){
history.replaceState(null, null,' ');
var url = $(location).attr('href')+'image/';
}
$('.portfolio img').mouseenter(function(){
var srcValue = $(this).attr('src').split('/');
srcValue = srcValue[1].split('.');
srcValue = srcValue[0]+'-bg';
$('#hovercontent').fadeIn(function() {
$(this).css('background', 'url('+url+srcValue+'.jpg) no-repeat');
});
});


What am I doing wrong and how can I fix it?

Answer

Check out this fiddle and change it to your needs. Store your image in a data= attribute.

HTML:

<a href="#" data-color="#ff0000">Red BG</a>
<a href="#" data-color="#00ff06">Green BG</a>
<a href="#" data-color="#0600ff">Blue BG</a>
<a href="#" data-color="#fff600">Yellow BG</a>

Javascript:

$(document).ready(function(){

  $('a').mouseenter(function(){
   var self = $(this),
       color = self.data('color');

    $('body').css('background-color',color);
  });

});

CSS:

body {
  background-color: pink;
  -webkit-transition:background 1s;
  -moz-transition:background 1s;
  -o-transition:background 1s;
  transition:background 1s
}

Change it to fit your needs, this snippet is easily cofigurable and it works in all modern browsers (>IE9, Chrome, Safari, Firefox, Mobile etc...). To set images as background, I would use it like this:

HTML:

<a href="#" data-bg-url="http://path/to/image-bg.jpg">Some BG</a>

JS:

$(document).ready(function(){

  $('a').mouseenter(function(){
   var self = $(this),
       url = self.data('bg-url');

    $('body').css('background-image', url);
  });

});

CSS:

body {
  background-color: pink;
  -webkit-transition:background 1s;
  -moz-transition:background 1s;
  -o-transition:background 1s;
  transition:background 1s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

EDIT TO ENABLE BACKGROUND IMAGE SUPPORT

Check out this fiddle. It's not the nicest solution but it works as expected. For each link it creates a DIV with a background-image. After this the corresponding div is shown based on the hovered link.

HTML

<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=one&w=980&h=400&txttrack=0">One</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=two&w=980&h=400&txttrack=0">Two</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=three&w=980&h=400&txttrack=0">Three</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=four&w=980&h=400&txttrack=0">Four</a>

CSS

.bgholder {
  -webkit-transition:opacity 1s;
  -moz-transition:opacity 1s;
  -o-transition:opacity 1s;
  transition:opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
}
a {
  position: relative;
  z-index: 2;

}

JS

  $(document).ready(function(){


    $('a').each(function(i){
        var self = $(this),
            bg = self.data('bg'),
            container = '<div class="bgholder" id="back-'+i+'" style="background-image: url('+bg+');"></div>';

      self.data('trigger', 'back-'+i);

        $('body').append(container);
    });

    $('a').mouseenter(function(){
       var self = $(this),
           cont = self.data('trigger');

        $('.bgholder').css('opacity',0);
        $('#'+cont).css('opacity',1);

    });
  });