Buat Gambar Bertukar Ganti

---

DEMO

Pergi layout -Add A gadget -Edit HTML/Javascript. Pastekan Kod

<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 class="imagebt1" src="urlgambaranda1" alt=""> <img class="imagebt2" src="urlgambaranda2" alt=""> </div>

Gantikan urlgambaranda1 dan 2 dengan gambar yang anda inginkan.

---