Resize background-image using jQuery Transit

Question

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???

score 1 · Answer 1 · edited Mar 05 '16 at 00:30

TRY THIS CODE. NOW YOU FIND THE SOLUTION.

.list{ width:/*100%*/ 90%; float:left; border-right:3px solid #fff; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ; position:relative; margin:0 auto 1px; transition: all 0.7s ease 0s; -moz-transform: scale(1.0) !important; -webkit-transform: scale(1.0) !important; -o-transform: scale(1.0) !important; -ms-transform: scale(1.0) !important; transform: scale(1.0) !important; border-bottom:0 !important; height:150px; background-size:100% 100%;}



.list:hover{background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ; transition: all 0.7s ease 0s; background-size:150% 150%;}

<div class="list">try this</div>

Thank you for your solution - it solves the first half of my requirement. But how to do the same with jQuery Transit plugin? I use jQuery in my project and some enents should run this scale effect. In most cases scale effect should be run whithout mousehover event. For example, I need to scale background image on jQuery(document).ready event. — Abaza, Mar 03 '16 at 10:16

score 1 · Accepted Answer · edited Mar 05 '16 at 00:29

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>

Yes, this is what I need! Thank you – Abaza Mar 04 '16 at 06:19 — Abaza, Mar 04 '16 at 06:19

score 0 · Answer 3 · edited Mar 05 '16 at 00:28

Try this, you got the solution.

.list{ width:/*100%*/ 90%; float:left; /*float:left;*/ border-right:3px solid #fff; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png"); position:relative; margin:0 auto 1px; transition: all 0.7s ease 0s; -moz-transform: scale(1.0) !important; -webkit-transform: scale(1.0) !important; -o-transform: scale(1.0) !important; -ms-transform: scale(1.0) !important; transform: scale(1.0) !important; border-bottom:0 !important; height:150px;}



.list:hover{background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png"); transition: all 0.7s ease 0s; -moz-transform: scale(1.04) !important; -webkit-transform: scale(1.04) !important; -o-transform: scale(1.04) !important; -ms-transform: scale(1.04) !important; transform: scale(1.04) !important;}

<div class="list">xd</div>

Thank you for your answer. Your solution scales whole DIV with all its content. But I need to scale only background image. Also I need to do it with jQuery's transit plugin. In other words this solution does not meet my requirements... — Abaza, Mar 03 '16 at 09:11
Thank you for your positive reply. I am working on your jquery based solution. — Ankit, Mar 03 '16 at 13:56

Resize background-image using jQuery Transit

3 Answers3