HTML+css3 圖片放大效果
阿新 • • 發佈:2018-07-21
src over pointer span hover solid inter cal order
<div class="enlarge"> <img src="xx" alt="圖片"/> </div>
第一種效果 超出不隱藏
.enlarge{ width: 200px; height: 200px; border: 1px #ffffff solid; } .enlarge img{ width: 100%; height: 100%; cursor: pointer; transition: all 0.6s; -ms-transition: all 0.8s; } .enlarge img:hover{ transform: scale(1.2); -ms-transform: scale(1.2); }
第二種效果 超出隱藏
.enlarge{ width: 200px; height: 200px; overflow: hidden; border: 1px #ffffff solid; } .enlarge img{ width: 100%; height: 100%; cursor: pointer; transition: all 0.6s; -ms-transition: all 0.8s; } .enlarge img:hover{ transform: scale(1.2); -ms-transform: scale(1.2); }
HTML+css3 圖片放大效果