Hover Image Shake

Halo semuanya! Jadi, hari ini, Nadya mau sekalian ngeposting tutorial membuat gambar bergoyang saat dihover. Jadi, pas kalian ngehover gambar, gambarnya itu bakal bergoyang gitu. Nadya dapet tutorial ini dari blognya kak Angel (tapi kak Angel ngerepost dari blognya kak Wulan), cuman disini Nadya ada modifikasi sedikit tutornya, karena Nadya gapunya kode yang ada di tutorialnya kak Angel. So let's go!

Denim dan Simple Template

• Blogger > Tema > Edit HTML
• Copy kode dibawah:

img{ -webkit-animation-name: none; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; border-radius: 10px; -webkit-transition: 1.0s; -moz-transition: 1.0s } img:hover{ -webkit-user-select:text; -moz-user-select:text; -webkit-animation-name: shake; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-transition: 1.0s; -moz-transition: 1.0s; border-radius: 20px; color:#555; } @-moz-keyframes shake /* Firefox*/ { { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-ms-keyframes shake /* IE9*/ { 10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); } 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); } 30% { -ms-transform: translate(0px, 2px) rotate(0deg); } 40% { -ms-transform: translate(1px, -1px) rotate(1deg); } 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); } 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); } 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); } 90% { -ms-transform: translate(2px, 2px) rotate(0deg); } 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes shake /* Safari and Chrome */ { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }

• Dan letakkan DIATAS kode /* Header (klik ctrl+f untuk memudahkan pencarian).
• (Kalau Nadya pakai cara ini^^) bagi yang memang nggak ada kode /*Header, kalian bisa paste dibawah kode:

.post-body img{

height:auto;

max-width:100%

• Simpan! 

Blogskin:

• Blogger > Tema
• Copas kode tadi, dan letakkan diatas kode </style>
• Simpan!

Okee, sekian postingan Nadya kali ini! Semoga membantu ya!

Have a nice day, and goodbye~