Hiệu ứng phóng to hình ảnh khi rê chuột vào

Hôm nay Vnadmin sẽ giới thiệu cho các bạn một hiệu ứng phóng hình ảnh khi bạn rê chuột vào nó. Khi rê chưa rê chuột ảnh sẽ nhỏ và có hiệu ứng mờ ảo nhưng khi rê chuột vào thì ảnh lớn và sáng hẳn lên. Hiệu ứng này khá đẹp mắt cho những blog có bộ sưu tập ảnh, hôm trước mình cũng đã đăng cho các bạn một Template Ảnh khá đẹp, nếu dùng tiện ích này cho template NÀY thì quá tuyệt.

Xem Demo

Các bước thực hiện
1. Các bạn vào Thiết kế rồi Chỉnh sửa HTML
2. Thêm đoạn Code dưới đây trước thẻ </head>

<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>

Như vậy mỗi khi viết bài có hình ảnh các bạn chỉ cần bật qua HTML và dán code sau:

<div class="hovergallery">
<img src="URL" />
<img src="URL" />
</div>

Nguồn Dynamicdrive