jquery - bootstrap 3 div 的背景图像在悬停时缩放

Question

我花了几个小时来找到使用 CSS 的正确方法，以便在将鼠标悬停在具有背景图像的 div 上时添加缩放效果。我确实尝试过这段代码并进行了修改，但仍然不起作用

.zoom_img img{margin:50px;
height:100px;
width:100px;
-moz-transition:-moz-transform 0.5s ease-in; 
-webkit-transition:-webkit-transform 0.5s ease-in; 
-o-transition:-o-transform 0.5s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
}

我的代码是 here

Answer 1

我不知道这是否是您希望做的。但以这种方式它正在工作:

.zoom_img
{
    height:300px;
    background-image: url(http://desktopbackgroundshq.com/backgrounds/animal-bird-animal-backgrounds-animal-bird-25907.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
}


.zoom_img:hover{
    -moz-transform:scale(2); 
    -webkit-transform:scale(2);
    -o-transform:scale(2);
}

代码:http://www.bootply.com/N3vP4pzxTT