我有一个带有背景图像的div,我想要做的是,当我将鼠标悬停在它上面时,背景图像的隐藏部分将显示如下例所示:
我的jsfiddle例子:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: cover;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
transform: scale(1.2);
}
body {
text-align: center;
}
正如您所看到的,在我的示例中,图像变得越来越大,而我想要显示另外20px的图像(不会影响边界半径).
一个html元素的示例:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;
background-size: 140px;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
transform-origin: center center;
}
.test:hover{
width: 90px;
height: 90px;
margin-left: -10px;
margin-top: -10px;
}
body {
text-align: center;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 