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

Question

我是 CSS 和 HTML 的新手，我想创建一个在您悬停时快速放大的图像。但是框半径也会放大。我知道我的 div 类做错了，但我不知道到底是什么。

所以我的意思是我想要这样的效果： http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html （金发女郎之一）

这是相关代码：

 #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>

对不起，我的英语很糟糕，如果这是一个愚蠢的问题，我很抱歉。提前致谢。

Answer 1

您需要向 #circle 元素添加 overflow: hidden; 样式，并使 .bolimg 成为嵌套的 <div>。请参阅代码段：

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



.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"> 
    <div class="bolimg"></div>
</div>

在 Firefox 中看起来很酷，但 Chrome 做了一些丑陋的转换 -.-

Answer 2

将背景图像 div 放在容器中：

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

将尺寸和边框移动到容器中，并给它 overflow: hidden:

.container {
  width: 200px;
  height: 200px;
  border: 4px solid black;
  border-radius: 100px;
  overflow: hidden;
}

将这些样式用于 bolimg class:

.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 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 4px solid black;
  border-radius: 100px;
}

.bolimg {
  background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  -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 {
  background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
  height: 125%;
  width: 125%;
}

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

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

How to zoom in when hover on image but make border stay in place?

css

border

hover

zooming