Changing background body image hovering a list with jQuery with fadeIn and fadeOut effects + zoom

Question

Long title, I know. It pretty much explains what I'm trying to accomplish.

My HTML looks like this:

<ul>
<li class="bg-0">
    <h2><a href="http://localhost/sublime/project/new-bikes/">New Bikes</a></h2>
    <span class="bg-0">http://localhost/sublime/wp-content/uploads/2016/10/new.jpg</span>
</li>
<li class="bg-1">
  <h2><a href="http://localhost/sublimes/project/smart-control/">Smart Control</a></h2>
  <span class="bg-1">http://localhost/sublime/wp-content/uploads/2016/10/smart.png</span>
</li>
<li class="bg-2">
  <h2><a href="http://localhost/sublime/project/laura/">Laura</a></h2>
  <span class="bg-2">http://localhost/sublime/wp-content/uploads/2016/10/laura.jpg</span>
</li>
</ul>

It's not the tidiest,but I'm generating it with Wordpress and I don't know any better (still learning my way through PHP too).

And, what I want is, when the user hovers on a list item the body image changes using the image url of that span within the list item. And on mouse out it reverts to the original color. I can do that using this code (again, I'm sure it's very ugly and dirty):

$('.our-work li').hover(
function(e){
//mouseenter
var theClass = $(this).attr('class');
    var theImage = $(this).find('span').text();
    $('body.page-template-ourwork-page').css({'backgroundImage' : 'url(' + theImage + ')'});
    console.log($('body').css('background'));
},
function(e){
 //mouseleave
 var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url()'});
}
);

But what I can't seem to accomplish is a "soft" change with a fadeIn and fadeOut effect. More importantly, I'd like that while the mouse is still on a list item, the background images slowly zooms in (gets "bigger") until a certain point of course and then stops.

I've tried the fadeIn and fadeOut functions but they seem to now work properly so I'm sure it's something I'm doing wrong.

Sorry for the long post and thank you.

Answer 1

need add index to CSS and put the higher number to the layer you need keep on/over the other.

<ul class="slide"></ul>

css

.slide{
    z-index: -1;/*Use it according to your needs.*/
}

for your Jquery need zoom:

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

It is not exactly the answer is just one example will have to adapt to your needs.