html - 悬停时展开背景

Question

我有一个带有背景图片的 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>

如您所见，在我的示例中，图片变大了，我想显示另外 20 像素的图片(不影响边框半径)。

Answer 1

一个 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>

示例 clip-path和 shape-inside :

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>