Share code tăng kích thước ảnh khi hover chuột qua

Code tăng kích thước ảnh khi hover chuột qua. Code cực hay cho web/wap.

Lưu ý:Code không hỗ trợ trên các điện thoại bàn phím và một số smartphone đời thấp HTML viết: <div class="example" align="center"> <ul> <li> <img src="http://thantienvxp.xtgem.com/images/lam-web/html_css.jpg" alt="HTML5 and CSS3" width="90%"height="auto"/></li> <li> <img src="http://thantienvxp.xtgem.com/images/lam-web/html_css.jpg" alt="HTML5 and CSS3" width="90%"height="auto"/></li> <li> <img src="http://thantienvxp.xtgem.com/images/lam-web/html_css.jpg" alt="HTML5 and CSS3" width="90%"height="auto"/></li> </ul> </div> Css viết: /*Copyright Thantienvxp.xtgem.com */ .example {list-style-type:none;margin:0;padding:0} .example li{display:inline;width:65px;height:60px} .example li img{width:100px; height:100px; border:0; margin-right:25px; margin-bottom:25px; -moz-transition: -moz-transform 0.7s ease; -webkit-transition:-webkit-transform 0.7s ease; -o-transition:-o-transform 0.7s ease; } .example li img:hover {-moz-transform:scale(1.5); -webkit-transform:scale(1.5); -o-transform:scale(1.5); z-index:auto; } /*Copyright Thantienvxp.xtgem.com */

Phóng to ảnh kèm box-shadow không phá vỡ layout

img {background-color:#fff; border:5px solid #ddd; margin-top:10px; box-shadow:0 0 5px #999; -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); transition-duration:.2s; -webkit-transition-duration:.2s; -ms-transition-duration:.2s; -moz-transition-duration:.2s; -o-transition-duration:.2s; position:relative; opacity:1; width:220px; padding:2px;} img:hover{box-shadow:0 0 55px #999; -moz-box-shadow:0 0 55px #999; -webkit-box-shadow:0 0 55px #999; transform:scale(1.2); -ms-transform:scale(1.2); -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); z-index:auto; opacity:1; width:700px;}