小编aza*_*ela的帖子

如何在悬停在图像上时放大,但让边框保持原位?

我是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); /* …
Run Code Online (Sandbox Code Playgroud)

css border zoom hover image-zoom

1
推荐指数
1
解决办法
1万
查看次数

标签 统计

border ×1

css ×1

hover ×1

image-zoom ×1

zoom ×1