7 Hover Effects Pada Gambar Blog

Membuat Efek pada gambar di Blog terutama Blogspot selalu menjadi topik yang menyenangkan untuk di eksplorasi. 7 efek berikut bisa sobat coba di blog masing-masing dan lumayan mengagumkan dan membuat pengunjung terpesona dengan tampilan gambar di Blog sobat.
Kali ini, kita akan mencoba sampai dengan Tujuh efek baru menggunakan Css dan cukup mudah di terapkan di blog masing-masinng.

Sebelum kita memulai, silahkan lihat dulu demo berikut ini D E M O

Baiklah mari kita Mulai
Silahkan menuju Dasbord  lalu klik Template ---> Edit HTML

Masukkan kode berikut ini di atas ]]></b:skin>
/* Hover Effects www.kumpulancara.com*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
.pic {
  border: 10px solid #fff; 
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
   
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111; 
}

Selanjutnya untuk menerapkan Effects pada 7 contoh berikut cara nya seperti ini

1. Effects Grow

Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 400px;
  height: 400px;
}

Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="grow pic">
  <img src="ulr gambar letakkan disini" alt="portrait">
</div>

2. Effects Shrink
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="shrink pic">
  <img src="ulr gambar letakkan disini" alt="shrink">
</div>

3. Effects Side Pan
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.sidepan img:hover {
  margin-left: -200px;
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="sidepan pic">
  <img src="ulr gambar letakkan disini" alt="sidepan pic">
</div>

4. Effects Vertical Pan
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.vertpan img:hover {
  margin-top: -200px;
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="vertpan pic">
  <img src="ulr gambar letakkan disini" alt="vertpan pic">
</div>

5. Effects Tilt
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="tilt pic">
  <img src="ulr gambar letakkan disini" alt="tilt pic">
</div>

6. Effects Morph
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="morph pic">
  <img src="ulr gambar letakkan disini" alt="morph pic">
</div>

6. Effects Focus
Caranya silahkan Masukkan kode berikut di atas ]]></b:skin>
/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}
Untuk pemanggilan atau menampilkannya pada Blog baik itu di Postingan atau Widget Silahkan masukkan kodenya seperti ini
<div class="focus pic">
  <img src="ulr gambar letakkan disini" alt="focus pic">
</div>

Selamat Mencoba..jika ada kesulitan Jangan ragu tanyakan di kotak komentar, jika bermanfaat silahkan di sebar ke teman2 sobat
Terima kasih
7 Hover Effects Pada Gambar Blog 10out of 10 ratings.
Powered by Blogger.