jquerycsstransit

Resize background-image using jQuery Transit

I have DIV with CSS property:

.box {
    background-image: url(images/img.jpg);
}

I have choosed this library for transition effects. And I want to use scale effect on some pages. Typical syntax to scale elements is something like this:

$('.box').mouseover(function() {
    $(this).transition({ scale: 2.2 });
});

Code above works without any error, but it scales whole DIV with all elements in it.

How to scale only background image???

Solution

  • I got the solution with JavaScript.

    $(document).on("mouseover", ".list", function(){
    $(this).css({"background-size":"150%", "transition":"all 0.5s ease"});
    	}).on("mouseout", ".list", function(){
    $(this).css({"background-size":"100%", "transition":"all 0.5s ease"});
    }); 
    .list{ width:/*100%*/ 90%; float:left; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ;  height:150px; background-size:100% auto; transition:all 0.5s ease 1s;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list">
xd
</div>