Dynamic background change depending on current image hover

Question

I want to change background image of a div, depending on what image is currently hovered by mouse. I want to create a gallery, so I have a list of images. I want to display the exact same url dynamically (hovered thumbnail) as hovered as a background of the main div (hero image).

<div id="background">
    <ul>
        <li><img src="image/1.jpg" alt="" /></li>
        <li><img src="image/2.jpg" alt="" /></li>
        <li><img src="image/3.jpg" alt="" /></li>
    </ul>
</div>

At the beginning, the id="background" has default background, which should be swaped to hovered image. When the image is unhovered, the image should back to the default one.

How can I do that using jquery the easiest way? It has to be the same url as the thumbnail, so it has to be dynamic, without additional url settings in jquery script file.

cssBlaster21895 · Accepted Answer · 2016-12-05T14:53:54.140

1

My first try

$('ul img').on('hover',  function(e){
    $('#background').css('background-image','url('+ $(this).attr('src')+')');
});

Or if you have problems with selectors

$('body').on('hover','ul img',  function(e){
      $('#background').css('background-image','url('+ $(this).attr('src')+')');
});

Also consider using mouseenter and mouseleave events.

Heres working code from your codepen:

$('body').on('mouseenter','img',  function(e){
      $('#hero-image').css('background-image','url('+ $(this).attr('src')+')');
});

edited Dec 05 '16 at 14:53

answered Dec 05 '16 at 14:00

cssBlaster21895

3,670
20
33

it don't seems to be working in my example, please could You take a look: http://codepen.io/dawidxt/pen/VmXPvZ – DavidPL Dec 05 '16 at 14:44
I edited my codepen, but still same effect, take a look and maybe its my browser's problem? http://codepen.io/dawidxt/pen/VmXPvZ – DavidPL Dec 05 '16 at 15:00
one thing , you forgot to add jquery, in codepen settings – cssBlaster21895 Dec 05 '16 at 15:04
Indeed... silly me... sorry and thank You, it does work now ! I am wondering if there is any dynamic way to prevent the default background image on mouse leave? like in "toggle" functionality. – DavidPL Dec 05 '16 at 15:08
Just describe what happens on mouseenter and what on mouseleave ;) – cssBlaster21895 Dec 05 '16 at 15:13
when page loads, it loads with predefined background - and this background might be changed over time to other via dashboard (cms). So it will definatly have different name. So the script should reverse the background to whatever was before hovering an ul image. – DavidPL Dec 05 '16 at 15:18
First grab var oldBg = $('#hero').css('background-image'); and use it on mouseleave. – cssBlaster21895 Dec 05 '16 at 15:23
yyy. english please :) – DavidPL Dec 05 '16 at 15:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129834/discussion-between-dawid-and-cssblaster21895). – DavidPL Dec 05 '16 at 19:47

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

Try this

$("ul li").on({
    mouseenter: function () {
        $('#background').css('background-image', $(this).attr('src'));
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        $('#background').css('background-image', 'default.png');
        //stuff to do on mouse leave
    } });

or

    $("ul li").hover(function () {
        $('#background').css('background-image', $(this).attr('src'));
        //stuff to do on mouse enter
    }, 
    function () {
        $('#background').css('background-image', 'default.png');
        //stuff to do on mouse leave
    });

for more details Is it possible to use jQuery .on and hover?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 05 '16 at 14:05

Naga Harish M

2,779
2
31
45

the on mouse leave event, has to as well be dynamic. I mean, it has to just back to previous default image, instead of static one. Because this image will be changeable via dashboard of my cms. – DavidPL Dec 05 '16 at 14:11
then it is better generate CSS dynamically, when admin changed the images. Or else generate html dynamically $('#background').css('background-image', echo DEFAULT_IMAGE ?>); or asp.net <% ... %> or else
and use this jQuery. .attr method.
– Naga Harish M Dec 05 '16 at 14:38

score -1 · Answer 3 · answered Dec 05 '16 at 14:05

    Try this (that is what I understand from your case )

#background {
 width:90% ;
 height:90% ;
 background:url(anyimage.jpg) no-repeat top left ;
}

#background:HOVER {
 width:100% ;
 height:100% ;
 background:url(hovered.jpg) no-repeat top left ;
}

Dynamic background change depending on current image hover

3 Answers3