Di postingan kali ini kang Ahmed mencoba share beberapa jenis trik membuat efek pada gambar (img hover) dengan css desktop efek yang kan bereaksi pada saat cunsor mouse di arah kan ke gambar, dengan trik css ini kita bisa menambah keragaman kreasi di tampilan blog kita agar lebih menarik…. Oke berikut penjelasannya
1 Masuk kedalam
Trik saat di cunsor di arah kan ke gambar seolah olah gambar masuk kedalam / mundur. Ini lah script css nya:
img:hover { -webkit-transform:scale(0.7); -moz-transform:scale(0.7); -o-transform:scale(0.7); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.5; margin: 0 10px 5px 0; }
2 Gambar mengecil
Trik agar size gambar menjadi kecil atau mengecil. Ini lah script css nya:
img:hover {-moz-transform:scale(0.7); -webkit-transform:scale(0.7); -o-transform:scale(0.7); }
3 Gambar membesar (zoom)
Akan menghasil kan gambar menjadi besar dari aslinya. Ini lah script css nya:
img:hover { -moz-transform:scale(1.2); -webkit-transform:scale(1.2);-o-transform:scale(1.2);}
4 Bergerak Ke kanan
Dengan Trik ini gambar kan bergeser ke kanan saat cunsor di arah kan. Ini lah script css nya:
img:hover {-webkit-transform: translate(50px, 0px); -moz-transform: translate(50px, 0px); -o-transform: translate(50px, 0px); -transform: translate(50px, 0px);}
5 Bergerak kekiri
saat cunsor di arah kan ke gambar maka gambar kan bergeser ke kiri. Ini lah script css nya:
img:hover {-webkit-transform: translate(-50px, 0px); -moz-transform: translate(-50px, 0px); -o-transform: translate(-50px, 0px); -transform: translate(-50px, 0px);}
6 Bergerak_kebawah
Css ini membuat gambar seakan turun ke bawah. Ini lah script css nya:
img:hover {-webkit-transform: translate(0px, 50px); -moz-transform: translate(0px, 50px); -o-transform: translate(0px, 50px); -transform: translate(0px, 50px);}
7 Bergerak _keatas
Css ini berfungsi agar gambar naik ke atas. Ini lah script css nya:
img:hover {-webkit-transform: translate(0px, -50px); -moz-transform: translate(0px, -50px); -o-transform: translate(0px, -50px); -transform: translate(0px, -50px);}
8 Mereng ke kanan
Dan css ini berfungsi supaya gambar mereng kearah kanan,saat cunsor diarah kan .ini script css nya:
img:hover { transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(1deg); }
9 Mereng kiri
Menghasil kan efek gambar mereng ke kiri Ini lah script css nya:
img:hover { transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -o-transform:rotate(1deg); }
untuk menambahkan style pada gambar spesifik, tentukan dahulu class css yang akan dibuat image hover, seperti: post.img:hover{kode css disini}
tata cara pemasangan script css
Dashboard >klik tema desktop> edit > paste script css (img hover) > save
Yang berminat di persilah kan meng copy dan atur lah *satuan nya* sesuai kebutuhan.
Demikian semoga sajian ini ber manfaat bagi kita semua dalam meng kreasi kan css blog kita. Semoga Wassalam,
