Css 当鼠标悬停在图像上，但使边框保持在原位时，如何放大？

我对CSS和HTML非常陌生，我想创建一个当你悬停时快速放大的图像。但长方体半径也会放大。我知道我的div类有问题，但我不知道到底是什么

我的意思是我想要这样的效果： （金发女郎）

以下是相关代码：

 #circle {
    border: 4px solid;
height:200px;
width:200px;
    border-color: #000;
    border-radius: 100px;
    }



.bolimg{
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat; 
height:200px;
width:200px;
-webkit-border-radius: 100px;
    -webkit-transition: 2s ease-out;
     -moz-transition: 2s ease-out;
     -o-transition: 2s ease-out;
     -ms-transition: 2s ease-out;
     transition: 2s ease-out;
}


.bolimg:hover {
    opacity:1;
     background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
     -webkit-transition: 2.5s ease-out;
     -moz-transition: 2.5s ease-out;
     -o-transition: 2.5s ease-out;
     -ms-transition: 2.5s ease-out;
     transition: 2.5s ease-out;
      -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);


}

这就是身体

<div id="circle" class="bolimg"> 
</div>
</div>

---

请原谅我的英语很差，如果这是一个愚蠢的问题，我很抱歉。提前感谢。

您需要添加一个

溢出：隐藏

将样式设置为

#圆圈

元素，并使

.bolimg

成为嵌套的

。 请参阅代码片段：

#圆圈{
边框：4px实心；
高度：200px；
宽度：200px；
边框颜色：#000；
边界半径：100px；
溢出：隐藏；
}
博利姆先生{
背景：url（'http://i60.tinypic.com/wb82e0.jpg")不重复;；
高度：200px；
宽度：200px；
-webkit边界半径：100px；
-webkit过渡：2秒缓解；
-moz转换：2秒放松；
-o型过渡：2秒缓解；
-ms转换：2秒缓解；
过渡：2秒放松；
}
博利姆：悬停{
不透明度：1；
背景图像：url（'http://i59.tinypic.com/k0szuv.jpg'); 
-webkit过渡：2.5s轻松推出；
-moz过渡：2.5s放松；
-o型过渡：2.5s缓解；
-ms过渡：2.5s缓解；
过渡：2.5s缓解；
-webkit转换：缩放（1.25）；/*Safari和Chrome*/
-moz变换：缩放（1.25）；/*Firefox*/
-ms变换：比例（1.25）；/*IE 9*/
-o变换：比例（1.25）；/*Opera*/
转换：比例（1.25）；
}

---

将背景图像

div

放在一个容器中：

<div class="container">
  <div class="bolimg"></div>
</div>

将这些样式用于

bolimg

类：

.bolimg {
  background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: 2s ease-out;
}

并在悬停时使用以下样式：

.bolimg:hover {
  background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
  height: 125%;
  width: 125%;
}

设置高度和宽度动画（而不是比例）可以解决Chrome和边框的问题

完整代码：

.container{
宽度：200px；
高度：200px；
溢出：隐藏；
边框：4倍纯黑；
边界半径：100px；
}
博利姆先生{
背景：url（'http://i60.tinypic.com/wb82e0.jpg")不重复;；
背景尺寸：封面；
宽度：100%；
身高：100%；
-webkit过渡：2秒缓解；
-moz转换：2秒放松；
-o型过渡：2秒缓解；
-ms转换：2秒缓解；
过渡：2秒放松；
}
博利姆：悬停{
背景图像：url（'http://i59.tinypic.com/k0szuv.jpg'); 
身高：125%；
宽度：125%；
}

太棒了！非常感谢，它完全起作用了！唉，我还有很长的路要走……我已经编程35年了，每天都能学到新东西。：）我们可以让它从中心缩放吗？@lyhong，你可以用高度和宽度增加的一半来设置左边的负边距和上面的负边距的动画。在这种情况下，将这些属性添加到

。bolimg:hover

：左边距：-12.5%；利润率最高：-12.5%；看，我已经编写了很长时间了，CSS非常棘手

.bolimg:hover {
  background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
  height: 125%;
  width: 125%;
}