CODEWITHSUNDEEP
jquerycss
user2835060
user2835060

Reputation: 213

pan image on hover horizontally and vertically

I'm trying to change the background position of an image on hover both vertically and horizontally, however the following code fails to work. Any ideas?

CSS:

#background-thing{ 
    background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll; 
    background-size: cover; 
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}

JQuery:

$('#background-thing').mousemove(function(e){
    var mousePosX = (e.pageX/$(window).width())*100;
    var mousePosY = (e.pageY/$(window).height())*100;
    $('#background-thing').css('backgroundPosition', mousePosX+'%' + mousePosY);
});

Upvotes: 0

Views: 1113

Answers (1)

adeneo
adeneo

Reputation: 318212

You're missing a space, and a %

$('#background-thing').css('backgroundPosition', mousePosX +'% '+mousePosY+'%');

FIDDLE

Upvotes: 3

Related Questions