4 HIỆU ỨNG HOVER TUYỆT VỜI CHO ẢNH VỚI CSS3

Thông thường khi bạn muốn những hiệu ứng đẹp mắt cho hình ảnh trong blog của mình thì bạn nghĩ ngay tới Javascript hoặc Jquery. Nay với CSS3, bạn cũng có thể có cho mình những hiệu ứng đẹp mắt và ấn tượng mà không phải lo nghĩ tới việc blog bị "nặng mông".
Nào, hãy cùng Share All world đem đến sự sống cho những trang blog khô héo đang đợi chết!


1. HIỆU ỨNG ẢNH NHẢY NHÓT (BUMP UP)

Đưa con chuột vào hình ảnh để xem hiệu ứng...

CSS cho hiệu ứng này

.ShareAllworld-Bump img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
.ShareAllworld-Bump img:hover {
    margin-top: 2px;
}

2. HIỆU ỨNG PHÓNG TO ẢNH (GROW)

Đưa con chuột vào hình ảnh để xem hiệu ứng...

CSS cho hiệu ứng này

#ShareAllworld-box {
 width: 300px;
 margin: 0 auto;
}
 
#ShareAllworld-Grow img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
 
#ShareAllworld-Grow img:hover {
 height: 133px;
 width: 400px;
 margin-left: -50px;
}

3. HIỆU ỨNG CHỮ CHẠY VÀO (TEXT FADE IN)

ShareAllworld.info

CSS cho hiệu ứng này

#ShareAllworld-Fade {
 width: 730px;
 height: 133px;
 line-height: 0px;
 color: transparent;
 font-size: 50px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
 text-transform: uppercase;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}
 
#ShareAllworld-Fade:hover {
 line-height: 133px;
 color: #575858;
}
 
#ShareAllworld-Fade img{
 float: left;
 margin: 0 15px;
}

4. HIỆU ỨNG ẢNH NHÚC NHÍCH

Đưa con chuột vào hình ảnh để xem hiệu ứng...

CSS cho hiệu ứng này

#ShareAllworld-Crooked {
 width: 800px;
 margin: 0 auto;
}
 
#ShareAllworld-Crooked img {
 margin: 20px;
 border: 5px solid #eee;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}
 
#ShareAllworld-Crooked img:hover {
 -webkit-transform: rotate(-7deg);
 -moz-transform: rotate(-7deg);
 -o-transform: rotate(-7deg);
}

=== Nhấn vào đây để tìm bài viết này trên google ===