Home Blogger Membuat 5+ Efek Hover Keren Pada Gambar Posting Blog

Membuat 5+ Efek Hover Keren Pada Gambar Posting Blog

by PediaKita
Siapa yang tak ingin blog pribadinya terlihat menarik dan keren di mata pembaca dan visitor blog. Tentu saja untuk mendandani blog semoga lebih terlihat kreatif itu perlu mendapat ilham dan mengetahui dasar-dasar wacana syntax coding di dalam template blog. Adapun cara untuk membuat blog terlihat keren sanggup bermacam-macam. Mulai dari memakai animasi atau ide-ide kreatif lain yang sanggup di implementasikan di dalam desain blog. Nah kali ini admin akan memfokuskan untuk membuat imbas pada gambar dan foto yang ada di dalam posting artikel dengan memakai imbas transisi CSS3.

Sebelumnya admin pernah membuat efek zoom dan efek bergoyang pada foto dan gambar postingan blog yang cukup praktis dengan memakai CSS3. Saya pun sedikit punya waktu luang untuk membuat 5 imbas lain yang cukup anda tertarik untuk menerapkannya. Efek pada gambar posting blog ini hanya akan bekerja apabila pengunjung blog anda melaksanakan hover terhadap foto atau gambar di dalam postingan blog. Dengan imbas yang terlihat lembut dan kreatif mengakibatkan instruksi CSS33 ini patut anda coba. Apa saja kelima kelima imbas hover yang sanggup membuat bergerak-gerak pada gambar posting blog tersebut? silahkan lihat di halaman demo.

 Siapa yang tak ingin blog pribadinya terlihat menarik dan keren di mata pembaca dan visit Membuat 5+ Efek Hover Keren Pada Gambar Posting Blog

1) Efek opacity dan Border radius kanan atas
Efek opacity merupakan salah satu favorit admin, dengan ditambahkan transisi pada border kanan atas mengakibatkan imbas yang pertama ini terlihat lembut dan santai.
2) Efek Hover Top dan Border radius kanan bawah
Gambar anda akan terangkat ke atas yang membuat pengunjung blog mendapat perhatian lebih ketika melakukn hover memakai imbas ini
3) Efek Mengecil
Efek mengecil atau cukup juga disebut imbas fade out akan membuat foto di dalam postingan blog terasa lebih keren.
4) Efek Melingkar
Bukan saja hanya melingkar, tenamun imbas ini juga memakai transisi CSS3 yang nantinya pada ketika hovering border berwarna putih akan muncul melingkari gambar di postingan blog anda.
5) Efek Rotasi dan Bayangan
Untuk imbas yang satu ini sengaja dibentuk berotasi sekitar 45deg yang nantinya akan muncul shadow berwarna hitam. 

Cara Membuat Efek Hover Keren Pada Gambar Posting Blog :
1) Masuk ke dashboard blogger kemudian klik Template
2) Klik Back Up kemudian klik Edit Template
3) Cari tag epilog ]]></b:skin>
4) Pilih salah satu satu imbas yang anda inginkan kemudian pastekan CSS di bawah ini sempurna di atas tag epilog ]]></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 imbas tersebut tak bekerja, dipastikan bahwa selektor css di didalam template anda tersebut sudah terkostumisasi. Untuk itu hapus selektor .post-body img:hover dan ganti dengan instruksi gres dari salah satu kelima imbas tersebut. Selamat mencoba, Happy Coding!


Sumber artikel ini dari blog heyriad

You may also like