CODEWITHSUNDEEP
jqueryimagebackgroundhover
techansaari
techansaari

Reputation: 371

change width of div background image on hover with animation

I want to change width of background image of div on hover. My code is :

HTML :

<div class="block2 todrop" target="regbuyer.php"></div>

CSS:

.col1 .block2                   { float: right; margin: 104px 0 0 0; width: 208px; height: 104px; background: url(../images/block2-1.jpg) no-repeat center center; background-size: 100% 100%; }
.todrop                         { cursor: pointer;  }

Upvotes: 0

Views: 1794

Answers (2)

codewrangler
codewrangler

Reputation: 350

Something like

$('.block2').live('mouseover', function() {
    $(this).animate({width: '300px'});
});

$('.block2').live('mouseout', function() {
    $(this).animate({width: '208px'});
});

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

I just re-read the question and realized I'm a doofus

You can't actively change the background size, however, you can use classes that have different background sizes, and alternate between the two on hover.

$('.block2').hover(function(){
   $(this).removeClass('newSize').addClass('oldSize');
}, function(){
   $(this).removeClass('oldSize').addClass('newSize');
});​

The CSS.

.newSize{
    background-size:25% 25%;
}
.oldSize{
    background-size:100% 100%;
}

Just start with one of those on the element when it's created and you're good to go.

Fiddle

Upvotes: 1

Related Questions