Cách tạo hiệu ứng bóng mờ cho ảnh khi dê chuột với CSS

Ở một số các trang web khi bạn ghé thăm thì có một hiệu ứng khá là hay đó là hiệu ứng ảnh mờ đi và nét khi ta dê chuột vào. 

Demo for Post

Bạn cũng có thể bấm vào hình dưới để xem:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

  5- Lưu Mẫu lại.

  6- Bi giờ để tạo hiệu ứng cho ảnh trong khi viết bài bạn Check vào ô HTML và chèn ảnh theo cấu trúc sau:

<a href="#"  class="linkopacity"><img src="URL hình ảnh" /></a>

Trong đó:

• class="linkopacity": Là dùng để gọi hàm css bên trên mình đã viết để làm mờ ảnh cần thiết. Bạn chỉ việc thêm thể này vào bất cứ hình nào bạn muốn nó mờ thôi, còn nếu không bỏ thẻ này vào thì hình vẫn bình thường.
• Dấu thăng màu đỏ #  : Là link liên kết mà khi Click vào hình sẽ tới trang web mà bạn muốn.
• URL hình ảnh : Là link ảnh, ảnh này chỉ hiện rõ khi bạn dê chuột vào.

Vi dụ:

<a href="http://namkna.blogspot.com/"  class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbcIO3InqNOLeqmSDuGYsj1col4M02SgLS1k_dzoWblFhQ0e_sGCbY5pzrDE7WID41zOoXBay9xrvq4kiLs6mB9nwQTVdlchTjCFBV3N7QLpNq6Ke0Xitk_azdWjADomOhXFsDvm8aEzu/s1600/tao-anh-mo-cho-blogspot-namkna-ngcotra.jpg" /></a>

Ngoài ra ở bước 1 bạn có thể dùng Code code bên bưới để tạo hiệu ứng ảnh mờ dần đi.

Demo:

.img {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

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

Chủ đề: