7 Hover Effects Pada Gambar Blog - Hallo Sob Jody Blog, artikel kali ini berjudul 7 Hover Effects Pada Gambar Blog, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : 7 Hover Effects Pada Gambar Blog
link : 7 Hover Effects Pada Gambar Blog

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

Demikianlah Artikel 7 Hover Effects Pada Gambar Blog

Sekian 7 Hover Effects Pada Gambar Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel 7 Hover Effects Pada Gambar Blog dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/02/7-hover-effects-pada-gambar-blog.html Semoga artikel ini bisa bermanfaat.

Tweet