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

Answer 2

试试这个

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

bootstrap 3 div的背景图像放大悬停

2 个答案: