Monday, February 4, 2013

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 Rating: 4.5 Diposkan Oleh: Sarjana Cebong

8 komentar:

  1. Tolong Bagaimana cara membuat page (selain page utama/beranda) yg bisa ditambah2 posting atau artikel seperti bisa dilakukan di page utama. Terima kasih. Salam ...

    ReplyDelete
  2. Maaf, maksud sy, di blogspot ada page 'beranda' yg bisa diisi posting mnrt tgl ato judul dan bisa slalu ditambah. trus mis sy pengin buat page 'bisnis' yg juga bisa diisi post dan bisa ditambah lagi, spt di page 'beranda'. kalo yg sy bisa skrg di page selain 'beranda' sy hanya bisa tulis 1 post. begitu jg page lain. mdh2an lbh jelas. trima kasih.

    ReplyDelete
  3. @Shar Darmintomungkin maksud agan membuat page/laman di blogspot, kalau ya caranya :
    1.Silahkan menuju beranda klik blog yang mau di buatkan page, lalu silahkan klik LAMAN.
    2. Silahkan klik Laman baru
    3. Klik Laman kosong
    Nah agan bisa buat Laman sebanyak-banyak nya....
    Semoga bermanfaat

    ReplyDelete
  4. Ini yang saya cari...variasi, modifikasi gambar postingan. Thanks atas sharingnya

    ReplyDelete
  5. kode /* Hover Effects www.kumpulancara.com*/
    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    nya itukan diletkkan diatas ]]>,
    terus kode yang effect focus, grow dll itu juga diletakkan diatas ]]>,
    masih bingung ni, berarti kode effect nya itu diatasnya kode /* Hover Effects www.kumpulancara.com*/ atau dibawahnya? mohon penjelasan maklum saya pemula :D

    ReplyDelete
  6. @Fatin Alifah contoh nya seperti ini gan
    /* 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;
    }
    /*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;
    }
    ]]></b:skin>

    ReplyDelete