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

Hiệu ứng phóng to ảnh khi rê chuột vào ảnh hay còn gọi là hover ảnh. Hiệu ứng này là cho bức ảnh của bạn to lên khi con trỏ truột di chuyển tới vị trí của tấm ảnh.

Có lẽ hiệu ứng này thì được áp dụng cho các trang web bán hàng nhiều hơn. Còn ở các thể loại web khác có lẽ bạn sẽ ít gặp hơn, bới lẽ nó cũng thực sự không cần thiết cho lắm.

Các bước thực hiện như sau:

Đầu tiên các bạn copy đoạn code sau và chèn vào trước thẻ </head> trong mãy của mình:

<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: [COLOR=#b30000]0.9[/COLOR]; /*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>

Bước tiếp theo các bạn các bạn sẽ sử dụng cặp thẻ sau trong khi viết bài.

<div class="hovergallery">
<img src="Link ảnh" />
<img src="Link ảnh" />
</div>

Như trong hình dưới đây nhé!

Lưu ý: khi viết bài các bạn chuyển sang thẻ html để chèn code nhé!

 Các bạn có thể xem demo dưới đây nhé:

Ảnh số một

Hoặc bạn có thể xem demo tại đây. Do trang mình bị lỗi chút nên không chuẩn.
giaydankinhnnd.com