Tạo hiệu ứng mờ cho ảnh khi rê chuột

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Có nhiều cách để tạo hiệu ứng cho hình ảnh trên blog, hôm nay mình xin chia sẻ cùng các bạn cách tạo hiệu úng mờ đi cho hình ảnh khi rê chuột vào nó. Hiệu ứng này sẽ làm cho độ rỏ của bức ảnh ban đầu giảm xuống ở một mức nào đó mà ta có thể tự đặt trước cho nó. Vì vậy khi chúng ta rê chuột vào ảnh đó thì nó sẽ không còn rỏ như ban đầu nữa, mà nó sẽ mờ đi. Hiệu ứng này cũng khá hữu ích trong việc gây sự chú ý của khách viếng thăm blog.


☼ Bắt đầu tiến hành thủ thuật

1. Đăng nhập Blogger
2. Tìm đến thẻ bên dưới (Dùng Ctrl F) ]]></b:skin>
3. Thêm vào trước thẻ vừa tìm được code bên dưới
.fuzzyimg {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0; border:0; }

.fuzzyimg:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0; }

Tùy chỉnh: lớp opacity: 0.30; chính là độ mờ của ảnh khi rê chuột, bạn có thể tùy chỉnh lại cho phù hợp với ý bạn. Lưu ý: số càng nhỏ thì ảnh càng mờ và ngược lại.

4. Save template lại.
Để sử dụng hiệu ứng cho ảnh trên blog hay trong bài đăng của bạn thì bạn hãy sử dụng code bên dưới cho ảnh.
<a class="fuzzyimg" href="http://www.traidatmui.com/" target="_blank"><img src="http://lh4.ggpht.com/_BTztXRwC9ik/TK8IQaazgWI/AAAAAAAAELM/tWA14uJeHo8/b.png" /></a>

Tùy chỉnh: Thay link màu xanh thành link dẫn tới (hoặc # khi không có liên kết) cho ảnh và thay link (http://lh4.ggpht.com/_BTztXRwC9ik/TK8IQaazgWI/AAAAAAAAELM/tWA14uJeHo8/b.png) thành link ảnh của bạn.

Chúc bạn thành công

Loading...

1 nhận xét

  1. cái này hay lắm anh à >< em sẽ áp dụng cho .http://www.thephotobest.blogspot.com/

    thnks bài anh nhé :XX

    Trả lờiXóa