Membuat efek hover pada gambar dengan CSS3

Kali ini Blog-KrenZ akan membagikan postingan yang berjudul Membuat efek hover pada gambar dengan CSS3 , sebelumnya Blog-KrenZ juga memposting artikel tentang Cara mengatasi Like fanspage yang menggangu saat kita menuju link yang kita tuju , Kembali keperbincangan , Blog-KrenZ melihat Blog dengan efek hover yang keren saat di sentuh , Blog-KrenZ pun lansung penasaran dengan Script yang membuat efek Hover tersebut , Ketika Blog-KrenZ Melihat Scriptnya dengan Cara mengklik kanan , Ketika saat mencari Script Hover tersebut , Blog-KrenZ langsung buka notepade untuk menaro Script tersebut , Nihh Langsung di coba yahh hasil copas scriptnya haha , Script ini di ambil dri Blog yang bernama '' Belajar Komputer Melalui Internet'' ,

1.seperti biasa , login dulu ke blogger
2. lalu pergi ke template > HTML
3 . lalu copy paste HTML sobat terus masukan ke dalam notepad [ untuk berjaga-jaga ]
4. cari kode .post img dan .post img:hover dengan cara menggunakan CTRL+F bila ada kode tersebut replace/ganti dengan kode efek hover yang ada di bawah , tapi bila tidak ada kode seperti di atas, tinggal pastekan di atas kode ]]></b:skin> . nah ini kode-kode efek hover yang sudah Blog-KrenZ rangkum .



1. efek gambar bergoyang

.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);
}

2. efek gambar membesar

.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);
}

3. efek gambar berputar

.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);
}

Jika Sudah memilih Efek-efek di atas , jangan lupa save template , jika Efek tersebut gagal dan sobat merasa ragu , silakan klik crtl+z untuk merubahnya kebentuk semula , sekian dari postingan saya , selamat mencoba