Membuat 5 Pengaruh Hover Keren Pada Gambar Posting Blog - info hape dan tips

Siapa yang tidak mau blog pribadinya terlihat menawan dan keren di mata pembaca dan visitor blog. Tentu saja untuk mendandani blog biar lebih terlihat inovatif itu perlu memperoleh wangsit dan mengenali dasar-dasar tentang syntax coding di dalam template blog. Adapun cara untuk bikin blog terlihat keren sanggup bermacam-macam. Mulai dari memakai animasi atau ide-ide inovatif lain yang sanggup di implementasikan di dalam konsep blog. Nah kali ini saya akan memfokuskan untuk bikin pengaruh pada gambar dan foto yang ada di dalam posting postingan dengan memakai pengaruh transisi CSS3.

Sebelumnya saya pernah bikin efek zoom dan efek bergoyang pada foto dan gambar postingan blog yang cukup sederhana dengan memakai CSS3. Saya pun sedikit punya waktu luang untuk bikin 5 pengaruh lain yang mungkin anda kesengsem untuk menerapkannya. Efek pada gambar posting blog ini cuma akan melakukan pekerjaan apabila hadirin blog anda mengerjakan hover kepada foto atau gambar di dalam postingan blog. Dengan pengaruh yang terlihat lembut dan inovatif mengakibatkan aba-aba CSS33 ini pantas anda coba. Apa saja kelima kelima pengaruh hover yang sanggup bikin bergerak-gerak pada gambar posting blog tersebut? silahkan lihat di halaman demo.

Lihat Demo

1) Efek opacity dan Border radius kanan atas
Efek opacity ialah salah satu favorit saya, dengan disertakan transisi pada border kanan atas mengakibatkan pengaruh yang pertama ini terlihat lembut dan santai.
2) Efek Hover Top dan Border radius kanan bawah
Gambar anda akan terangkat ke atas yang bikin hadirin blog memperoleh perhatian lebih saat melakukn hover memakai pengaruh ini
3) Efek Mengecil
Efek mengecil atau mungkin juga disebut pengaruh fade out akan bikin foto di dalam postingan blog terasa lebih keren.
4) Efek Melingkar
Bukan saja cuma melingkar, tapi pengaruh ini juga memakai transisi CSS3 yang nantinya pada saat hovering border berwarna putih akan timbul melingkari gambar di postingan blog anda.
5) Efek Rotasi dan Bayangan
Untuk pengaruh yang satu ini sengaja dibikin berotasi sekitar 45deg yang nantinya akan timbul shadow berwarna hitam. 

Cara Membuat Efek Hover Keren Pada Gambar Posting Blog :
1) Masuk ke dashboard blogger lalu klik Template
2) Klik Back Up lalu klik Edit Template
3) Cari tag penutup ]]></b:skin>
4) Pilih salah satu satu pengaruh yang anda harapkan lalu pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin> tersebut

Efek opacity dan Border radius kanan atas

 .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{opacity:.8; border-top-right-radius:70px 20px; -webkit-border-top-right-radius:70px 20px; } 
 

Efek Hover Top dan Border radius kanan bawah

 .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ position:relative; top: -10px; border-bottom-right-radius:70px 20px; } 
 

Efek Mengecil

 .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ -webkit-transform: scale(0.4, 0.4); -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -o-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); } 
 

Efek Melingkar

 .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ border-radius:50%; border: 4px solid #ECECEC; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } 
 

Efek Rotasi dan Bayangan

 .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{  transition: all 2s ease-in-out; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);  -ms-transform:rotate(45deg); -o-transform:rotate(45deg);  transform:rotate(45deg); z-index: 999; box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75); } 
 

4) Klik Simpan

Jika pengaruh tersebut tidak bekerja, ditentukan bahwa selektor css di didalam template anda tersebut telah terkostumisasi. Untuk itu hapus selektor .post-body img:hover dan ganti dengan aba-aba baru dari salah satu kelima pengaruh tersebut. Selamat mencoba, Happy Coding!

Sumber https://8tutorialandroid.blogspot.com