[英]How to add image zoom-in effect to block without fixed size?
我有流體網格:連續3塊, width:33.3%
。 該塊中包含的圖像的width: 100%
, height: auto
。 我想在懸停上添加此圖像的放大效果。 但是我不知道如何在不更改塊高的情況下使用流體網格進行操作。 您可以在下面查看我的代碼段。
有什么想法如何解決嗎?
.split.third { width: 33.3%; display: block; float: left; overflow: hidden; } .split.third img { width: 100%; height: auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .split.third:hover img { width: 120%; }
<div class="split-wrap"> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png" /> </div> </div> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png" /> </div> </div> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png" /> </div> </div> </div>
使用transform: scale(1.2)
。
.split.third { width: 33.3%; display: block; float: left; overflow: hidden; } .split.third img { width: 100%; height: auto; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .split.third:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); }
<div class="split-wrap"> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png"> </div> </div> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png"> </div> </div> <div class="split third"> <div class="cover"> <img src="http://cs5-3.4pda.to/5290239.png"> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.