[CSS]Làm ảnh mờ dần hoặc sáng lên khi rê chuột vào

Demo:

Opacity                 Clarity

[You must be registered and logged in to see this image.]           [You must be registered and logged in to see this image.]

Hướng dẫn:

Vào ACP > Display > Pictures and Colors > Colors > CSS Stylesheet

Opacity

Để làm ảnh sáng lên dần thì cho đoạn này vào CSS:

Code:

.opacity {
    opacity: 0.4;
    filter: alpha(opacity=40);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
            }
        
  .opacity:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;      
                    }  

Clarity

Còn mờ dần đi thì dùng đoạn này:

Code:

.clarity {
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
            }
        
  .clarity:hover {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;      
                    }