Code CSS Hiệu Ứng Hoán Đổi Hình Ảnh

Demo

1. Đăng nhập vào blog

2. Vào phần chỉnh sửa bố cục thêm tiện ích HTML/Javascript

3. Dán code dưới vào trong phần tiện ích

<style>
.btcontainer {
position: relative;margin: 30px;height: 250px;width: 550px;float: left;
}
/*Photo Border*/
.imagebt1, .imagebt2 {
border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.imagebt1 {
-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
.imagebt2 {
  left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
/*HOVERS*/
.btcontainer:hover {
  cursor: pointer;
}

.btcontainer:hover .imagebt1 {
  -webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate;
}
.btcontainer:hover .imagebt2 {
  -webkit-animation: imagebt2 1.5s 2 alternate;
     -moz-animation: imagebt2 1.5s 2 alternate;
      -ms-animation: imagebt2 1.5s 2 alternate;
       -o-animation: imagebt2 1.5s 2 alternate;
          animation: imagebt2 1.5s 2 alternate;

}
@keyframes "imagebt1" {
 0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-moz-keyframes imagebt1 {
 0% {
   -moz-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {
   -moz-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {
   -moz-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-webkit-keyframes "imagebt1" {
 0% {
   -webkit-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {
   -webkit-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {
   -webkit-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-ms-keyframes "imagebt1" {
 0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-o-keyframes "imagebt1" {
 0% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-o-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@keyframes "imagebt2" {
 0% {
    left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
    left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {
    left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {
    left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-moz-keyframes imagebt2 {
 0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
   left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {
   left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {
   left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-webkit-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
   left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-ms-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-o-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg);
 }
}
</style>

<div class="btcontainer">
<img alt="" class="imagebt1" src="https://1.bp.blogspot.com/-XKZEIfqBoAw/WHICf9Qtc7I/AAAAAAAAByg/LcJMw8Zou4M-FajQg06Lk0tli639SZqKQCLcB/s1600/priv.png" />
  <img alt="" class="imagebt2" src="https://3.bp.blogspot.com/-DEca9NRv88I/WHIABmbteEI/AAAAAAAAByM/3_-6XnHFsgELfabY7WfNRQ00_KCWYtd5wCLcB/s1600/pp.png" />
</div>

4. Lưu Tiện ích lại.

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh