Tổng hợp 3 hiệu ứng hover cho hình ảnh

Posted by on
Nhưng hình ảnh trong bài viết nếu được thêm một chút hiệu ứng khi hover sẽ làm cho blog thêm sinh động hơn. Hôm nay mình sẽ giới thiệu với các bạn 3 hiệu ứng hover ảnh phổ biến nhất đó là : xoay ảnh, thay đổi kích thước ảnh và làm mờ ảnh. Bên dưới là code của hiệu ứng cùng cách để thêm vào blog.

#Tạo hiệu ứng hover cho hình ảnh

Bên dưới là các code css tương ứng với từng hiệu ứng, các bạn xem demo nằm ở ngay trên code và xem xét chọn hiệu ứng nào. Sau khi chọn xong, các bạn thực hiện thêm nó vào blog:
1. Đăng nhập blog
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code css mà bạn đã chọn vào trước thẻ mà bạn vừa tìm
5. Lưu mẫu lại và kiểm tra kết quả.

Lưu ý: thủ thuật này áp dụng cho tất cả hỉnh ảnh trên bài viết của blog

#Xoay ảnh

1. Xoay ảnh 360 độ trong 0.5 giây
Xoay ảnh 

.post img {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

2. Xoay ảnh 180 độ
Xoay ảnh 

.post img {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}

3. Xoay ảnh -360 độ, tức là quay ảnh 360 độ nhưng theo chiều ngược kim đồng hồ
Xoay ảnh 

.post img{-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;}
.post img:hover{-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);}

4. Ban đầu thì làm cho hình ảnh bị lệch (-30 độ) nhưng khi hover thì hình ảnh trở về vị trí cân bằng(0 độ)
Xoay ảnh 

.post img{-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;

-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.post img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}

5. Xoay ảnh liên tục khi hover, đây là một hiệu ứng khá đẹp mắt. Ảnh sẽ được xoay liên tục khi bạn hover, khi không còn hover nữa thì ảnh ngừng chuyển động.
Xoay ảnh 

.post img:hover{
animation xoayanhlientuc1 2s linear infinite;
-moz-animation: xoayanhlientuc1 2s linear infinite;
-webkit-animation: xoayanhlientuc1 2s linear infinite;
-o-animation: xoayanhlientuc1 2s linear infinite;
}

@keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
/* Hien thi cho Safari and Chrome */
@-webkit-keyframes xoayanhlientuc1 {
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

/* Hien thi cho Firefox */
@-moz-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

/* Hien thi cho Opera */
@-o-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

#Thay đổi kích thước ảnh

1. Thu nhỏ ảnh khi hover (xảy ra trong 0.5s) thu nhỏ ảnh còn 0.8 so với ban đầu
Xoay ảnh
.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(0.8); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/}

2. Phóng to ảnh khi hover (phóng to 1.1 lần so với kích thước ban đầu)
Xoay ảnh
.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/}

3. Ban đầu thì thu nhỏ ảnh(0.8), sau khi hover thì ảnh sẽ được phóng to ra(1.1), đây là sự kết hợp 
Xoay ảnh

.post img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
}

#Làm mờ ảnh

Ban đầu ảnh sẽ được làm mờ(0.5) nhưng sau khi hover thì ảnh sẽ hiện rõ ra(1)
Xoay ảnh
.post img{opacity: 0.5;
}
.post img:hover{opacity: 1;
}

#Hiệu ứng bo góc


1. Bo cả 4 góc
Xoay ảnh

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

2. Bo góc trên bên trái và góc dưới bên phải
  Xoay ảnh

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 30px 1px 30px 1px;
    -webkit-border-radius: 30px 1px  30px 1px;
    -ms-border-radius: 30px 1px 30px 1px;
    -o-border-radius: 30px 1px 30px 1px;
    border-radius: 30px 1px 30px 1px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

3. Bo góc trên bên phải và góc dưới bên trái
Xoay ảnh

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 1px 30px 1px 30px ;
    -webkit-border-radius:  1px  30px 1px 30px;
    -ms-border-radius:  1px 30px 1px 30px;
    -o-border-radius:  1px 30px 1px 30px;
    border-radius: 1px 30px 1px  30px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

#Sử dụng kết hợp nhiều hiệu ứng

Bạn có thể kết hợp sử dụng nhiều hiệu ứng, chẳng hạn như bạn có thể kết hợp hiệu ứng làm mờ ảnh và hiệu ứng thay đổi kích thước.
Để kết hợp được nhiều hiệu ứng lại thì bạn cứ việc chèn thêm css của nó vào trước thẻ ]]></b:skin> là được.
Lưu ý: Khi kết hợp thì phải hợp lí, bạn không thể kết hợp hiệu ứng thu nhỏ và hiệu ứng phóng to ảnh khi hover được.
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.