在悬停

Question

我有一个带有背景图像的div，我想要做的是，当我将鼠标悬停在它上面时，隐藏的背景图像部分就像下面的例子一样显示：

我的jsfiddle例子：

＆＃13;

＆＃13;

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;
}

＆＃13;

<div class="test">

</div>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，在我的例子中，图像变得越来越大，而我想要显示另外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>

Answer 2

你可能会超大一点背景图片       （background-size:auto 90px;）并在悬停时添加一些填充和重置位置（.test:hover{padding:10px; margin:-10px;}）

大多数实际浏览器都会理解这些规则，如果不是全部的话。

＆＃13;

＆＃13;

div.test {
  background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
  background-size:auto 90px;
    width: 70px;
    height: 70px;
    background-position: center;
    border-radius: 100%;
    display: inline-block;
    transition: all 1s;
    position: absolute;
    top: 100px;
}

.test:hover{
  padding:10px;
  margin:-10px;;
}

body {
  
  text-align: center;
}

＆＃13;

<div class="test">

</div>

＆＃13;

＆＃13;

＆＃13;

另一种可能性是使用inset shadow

＆＃13;

＆＃13;

div.test {
  background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
  background-size: auto 90px;
  width: 90px;
  height: 90px;
  /* hide buggy ff render */
  background-clip: content-box;
  padding: 1px;
  /* end fix ff */
  background-position: center;
  border-radius: 100%;
  display: inline-block;
  transition: all 1s;
  position: absolute;
  top: 90px;
  box-shadow: inset 0 0 0 10px white;
}
.test:hover {
  box-shadow: inset 0 0 0 0px white;
}
body {
  text-align: center;
}

＆＃13;

<div class="test">

</div>

＆＃13;

＆＃13;

＆＃13;

还有：padding，box-sizing和background-clip

＆＃13;

＆＃13;

div.test {
  background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) ;
  background-size: auto 90px;
  width: 90px;
  height: 90px;
  padding: 10px;
  background-clip:content-box;
  box-sizing:border-box;
  background-position: center;
  border-radius: 100%;
  display: inline-block;
  transition: all 1s;
  position: absolute;
  top: 90px;
}

.test:hover {
  padding:0px;
}

/* show transparency */
html {
  min-height:100%;
  text-align: center;
  background:linear-gradient(45deg, gray, yellow,purple,lime,pink,turquoise, gray, yellow,purple,lime,pink,turquoise);
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您缺少在悬停事件中删除Q(J,K,L,0)属性：

border-radius

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);
  border-radius: 0px;
}

body {
  
  text-align: center;
}