Thứ Tư, 30 tháng 1, 2013

Code tạo hiệu ứng mờ ảnh và khi rê chuột vào thì rõ ảnh

Ở một số các trang web khi bạn ghé thăm thì có một hiệu ứng khá là hay và cũng được áp dụng rộng rãi tuỳ vào trường hợp.
Đó là hiệu ứng làm mở ảnh và chỉ nhìn rõ khi rê chuột vào, hiệu ứng này rất hay và được viết bằng css.
Dưới đây mình xin trình bày cách làm như sau.
Đầu tiên các bạn tìm một bức ảnh nào đó ( tuỳ các bạn ), ở đây mình chọn tấm hình này.

sau đó mở Notepad lên Mình dùng Notepad++ Sau đó các bạn gõ đoạn code này vào.
Xem : Demo
Code :

<html>
<head>
<style type="text/css">
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; }
</style>
</head>
<body>
<a href="Link web"><img src="Link ảnh" class="linkopacity"/></a>
</body>
</html>

Ở đây mình giải thích lại là :