Изменение размера фонового изображения с помощью JQuery Transit

Question

У меня есть DIV с CSS собственности:

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

Я выбрал this библиотеку эффектов перехода. И я хочу использовать масштаб эффект на некоторых страницах. Типичный синтаксис для масштабирования элементов является то вроде этого:

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

Код выше работ без каких-либо ошибок, но весы всего DIV со всеми элементами в нем.

Как масштабировать только фоновое изображение ???

Answer 1

Я получил решение с JavaScript.

$(document).on("mouseover", ".list", function(){ 
 
    $(this).css({"background-size":"150%", "transition":"all 0.5s ease"}); 
 
    \t }).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>

Answer 2

Попробуйте это, у вас есть решение.

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

Answer 3

попробуйте этот код. ТЕПЕРЬ ВЫ НАЙДЕТЕ РЕШЕНИЕ.

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