我是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)