我有一个带有背景图像的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; }
<div class="test"> </div>
正如您所看到的,在我的示例中,图像变得越来越大,而我想要显示另外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; }
<div class="test"> </div>
div.test { background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%; background-size: cover; shape-inside: circle(30% at 50% 50%); clip-path: circle(30% at 50% 50%); -webkit-clip-path: circle(30% at 50% 50%); width: 70px; height: 70px; background-position: center; display: inline-block; transition: all 1s; position: absolute; top: 100px; transform-origin: center center; } .test:hover{ shape-inside: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } body { text-align: center; }
<div class="test"> </div>