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

By Nguyên Luật → Saturday, June 23, 2012

Hôm nay LyLd 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. Sau đây là cách làm:

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


Cập nhật hiệu ứng cho tất cả ảnh trong bài đăng:

     1. Vào Thiết kế --> Chỉnh sửa HTML

     2. Thêm đoạn mã bên dưới trước ]]></b:skin>

.post 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*/ }

.post 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; }

Các bạn có thể thay đổi số tô xanh theo ý muốn: 
0.8 : độ thu nhỏ của ảnh khi chưa rê chuột (muốn ảnh bình thường thì đặt là 1)
0.5 : thời gian
1.1 : độ phóng to của ảnh khi rê chuột vào

Thích hợp trên các trình duyệt : Firefox 3.6+ , G.Chrome , Safari 4+ , Opera 9.5+ .
Không áp dụng trên IE .
Nguồn Dingkiutrue

11 comments to ''Hiệu ứng phóng to ảnh khi rê chuột vào"

ADD COMMENT
  1. Chào bạn. Mình thấy bài viết rất bổ ích và hiện tại mình đang áp dụng thủ thuật này cho blog của mình.
    Nhưng có 1 thắc mắc là: Làm sao để lúc zoom hình mà vẫn giữ nguyên độ phân giải như hình gốc không bạn?
    Mình cảm ơn bạn rất nhiều
    Ghé thăm blog mình nhé :)
    http://www.truyenhay.info

    ReplyDelete
    Replies
    1. Mình đã qua Blog bạn. Mình thấy Blog bạn áp dụng thủ thuật này nhìn rất đẹp. :))
      Không hiểu ý sau của bạn lắm. Thì nó vẫn độ phân giải của ảnh cũ, mà phóng lên tất nhiên là chất lượng nhìn hơi vỡ thôi. =D

      Cảm ơn vì đã quan tâm nhé!

      Delete
  2. Blog Ly đổi sang tên mới rùi há, wa đây nhiều bài viết wa, lấn sân sang thủ thuật luôn rồi hén.hì hì.

    ReplyDelete
    Replies
    1. Tiện thể đổi template nên đổi luôn tên cũng như tên miền.=D
      Đang chuyển Blog sang hướng khác mà anh! :)

      Delete
  3. Yeah Lười viết code, tiện có sẵn đây mang về dùng =))

    ReplyDelete
    Replies
    1. Cái này dành cho những người lười xíu mà =D=D

      Delete
  4. tại sao không rõ hình ảnh mà cữ thấy mờ mờ vậy http://www.ngonphim.com/

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete

- Không nói chuyện thô tục thiếu văn hóa,...
- Không spam. Còn lại thì chém gió thoải mái hết! :D
@ Có thể chèn ẢnhVideo Youtube bằng cách paste link trực tiếp