Cara Membuat Effect Gambar Berputar Saat Hover

Judul postingan kali ini adalah cara membuat effet berputar pada gambar saat hover,effect berputar saat gambar di sentuh pointer,effect gambar berputar pada postingan,effect gambar berputar saat hover dengan mouse.

Sebenarnya cara ini sangat banyak terdapat di blog sahabat lainnya tapi kali ini saya hanya ingin sharing lagi untuk para blogger newbe seperti saya ini.

Sebagian template blogger sudah memiliki fasilitas atau effect seperti ini tapi bagaimana dengan template blogger yang belum memilikinya sedangkan para blogger newbe seperti saya ingin memilikinya,karena menurut saya ini dapat menjadi daya tarik tersendiri.

Judul postingan saya yaitu cara membuat effect berputar pada gambar saat hover tapi tidak hanya itu saja yang saya akan sharing,masih ada yang lainnya :

• effect gambar bergoyang
• effect gambar membesar atau effect zoom
• effect gambar berputar dan membesar
• effect gambar memiliki bayangan
• effect gambar berubah bentuk

Pertama login dulu ke blogger dan menuju "Edit HTML" kemudian cari kode ]]></b:skin> dan copas kode dibawah tepat diatas kode ]]></b:skin> !

• effect gambar berputar

Klik show untuk melihat

.post img {
border:1px solid #ffff01;
margin:3px;
max-width:570px;
padding:3px
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}

.post img:hover {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);

}

• effect gambar berputar dan membesar

Klik show untuk melihat

.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

• effect gambar bergoyang

Klik show untuk melihat

.post img {
box-shadow: 0 3px 6px rgba(0,0,0,.25);
transform: rotate(+2deg);
-o-transform: rotate(+2deg);
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
box-shadow: 0 3px 6px rgba(0,0,0,.5);
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

• effect gambar membesar atau zoom

Klik show untuk melihat

.post img {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

• effect gambar memiliki bayangan

Klik show untuk melihat

.post img {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

• effect gambar berubah bentuk

Klik show untuk melihat

.post img {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
-o-border-radius: 30px 0 30px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
}

Itu semua kode CSS nya dan bisa kalian edit sendiri sesuai dengan template blogger masing-masing.
Sekian dulu pertemuan hari ini dan selamat mencoba.

Terus mencari ilmu dan berbagi ilmu.