Hiệu ứng ảnh chuyển động khi rê chuột với CSS

Chủ Nhật, 18 tháng 9, 2011

  • Đăng nhập vào trang quản lý của Blogger --> Thiết kế --> Phần tử trang-->Mở rộng tiện ích.
  • Nhấn Crtl+F hoặc F3 tìm ]]></b:skin> 
  • Paste đoạn code sau vào dưới  ]]></b:skin> và Save lại :



#imagemove {      
    padding:0;       
    margin-left:30px;       
    list-style-type:none;       
    height:120px;       
    }       
#imagemove li {       
    display:block;       
    float:left;       
    width:120px;       
    height:120px;       
    position:relative;       
    margin:0 15px 7px 0;       
    }       
#imagemove li a {       
    display:block;       
    width:120px;       
    height:120px;       
    background:transparent;       
    overflow:hidden;       
    position:relative;       
        padding:5px;       
    } 
#imagemove li a img {      
    width:100%;       
    height:100%;       
    border:0;       
    margin-right:30px;       
    padding:5px;       
    }       
#imagemove li a:hover{       
    position:absolute;       
    left:0px;       
    top:20px;       
    padding:5px;       
    width:120px;       
    height:120px;       
    z-index:100;       
    }


Nhấn Save để lưu lại .

Tiếp theo để sử dụng hiệu ứng này thì khi post link ảnh cần kèm theo cặp thẻ :

<ul id="imagemove"> Link ảnh </ul> 


Demo :



Với hiệu ứng này các bạn có thể chèn vào Menu Blog hoặc vào bài viết tùy ý.
Chúc các bạn thành công !

Đăng nhận xét

↓ ↑