Question

我无法弄清楚为什么CSS img { max-width: 100%; display: block; } .thumbnail { position: absolute; top: 50%; left: 50%; width: 320px; height: 240px; -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */ -moz-transform: translate(-50%,-50%); /* Firefox */ -ms-transform: translate(-50%,-50%); /* IE 9 */ -o-transform: translate(-50%,-50%); /* Opera */ transform: translate(-50%,-50%); border-radius: 13px; } .image { width: 100%; height: 100%; overflow: hidden; border-radius: 13px; } .image img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -o-transition: all 1s ease; /* IE 9 */ -ms-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .image:hover img { -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上悬停时发生变化：http://jsfiddle.net/7pujbpn0/

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

border-radius

for(int i=1; i<=4; i++) {for(int j=1; j<=4; j++) System.out.println();设置为13px。当你将鼠标悬停在div上时，我只是试图在图像上实现简单的缩放效果。

Answer 1

如果你添加：

    .thumbnail {overflow: hidden;}

它应该可以解决问题。

以下是更新的jsfiddle的链接：

http://jsfiddle.net/7pujbpn0/2/

悬停时CSS边界半径的变化

1 个答案: