Membuat 5 Efek Hover Keren Pada Gambar Posting Blog

Siapa yang tidak mau blog pribadinya terlihat menarik dan keren di mata pembaca dan visitor blog. Tentu saja untuk mendandani blog agar lebih terlihat kreatif itu perlu menerima wangsit dan mengetahui dasar-dasar ihwal syntax coding di dalam template blog. Adapun cara untuk membuat blog terlihat keren mampu bermacam-macam. Mulai dari menggunakan animasi atau ide-ide kreatif lain yang mampu di implementasikan di dalam desain blog. Nah kali ini saya akan memfokuskan untuk membuat dampak pada gambar dan foto yang ada di dalam posting artikel dengan menggunakan dampak transisi CSS3.

Sebelumnya saya pernah membuat efek zoom dan efek bergoyang pada foto dan gambar postingan blog yang cukup sederhana dengan menggunakan CSS3. Saya pun sedikit punya waktu luang untuk membuat 5 dampak lain yang mungkin anda tertarik untuk menerapkannya. Efek pada gambar posting blog ini hanya akan bekerja apabila pengunjung blog anda melakukan hover terhadap foto atau gambar di dalam postingan blog. Dengan dampak yang terlihat lembut dan kreatif menjadikan aba-aba CSS33 ini patut anda coba. Apa saja kelima kelima dampak hover yang mampu membuat bergerak-gerak pada gambar posting blog tersebut? silahkan lihat di halaman demo.

Lihat Demo

1) Efek opacity dan Border radius kanan atas
Efek opacity merupakan salah satu favorit saya, dengan ditambahkan transisi pada border kanan atas menjadikan dampak 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 menerima perhatian lebih dikala melakukn hover menggunakan dampak ini
3) Efek Mengecil
Efek mengecil atau mungkin juga disebut dampak fade out akan membuat foto di dalam postingan blog terasa lebih keren.
4) Efek Melingkar
Bukan saja hanya melingkar, tetapi dampak ini juga menggunakan transisi CSS3 yang nantinya pada dikala hovering border berwarna putih akan muncul melingkari gambar di postingan blog anda.
5) Efek Rotasi dan Bayangan
Untuk dampak yang satu ini sengaja dibuat berotasi sekitar 45deg yang nantinya akan muncul 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 dampak yang anda inginkan 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 dampak tersebut tidak bekerja, dipastikan bahwa selektor css di didalam template anda tersebut sudah terkostumisasi. Untuk itu hapus selektor .post-body img:hover dan ganti dengan aba-aba baru dari salah satu kelima dampak tersebut. Selamat mencoba, Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Share this post