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 mampu sobat coba di blog masing-masing dan lumayan indah dan membuat pengunjung terpesona dengan tampilan gambar di Blog sobat.
Kali ini, kita akan mencoba hingga dengan Tujuh efek gres 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 isyarat berikut ini di atas ]]></b:skin>

/* Hover Effects www..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 pola berikut cara nya menyerupai ini

1. Effects Grow

Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="grow pic">   <img src="ulr gambar letakkan disini" alt="portrait"> </div> 

2. Effects Shrink
Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="shrink pic">   <img src="ulr gambar letakkan disini" alt="shrink"> </div> 

3. Effects Side Pan
Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="sidepan pic">   <img src="ulr gambar letakkan disini" alt="sidepan pic"> </div> 

4. Effects Vertical Pan
Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="vertpan pic">   <img src="ulr gambar letakkan disini" alt="vertpan pic"> </div> 

5. Effects Tilt
Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="tilt pic">   <img src="ulr gambar letakkan disini" alt="tilt pic"> </div> 

6. Effects Morph
Caranya silahkan Masukkan isyarat 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 menyerupai ini

<div class="morph pic">   <img src="ulr gambar letakkan disini" alt="morph pic"> </div> 

6. Effects Focus
Caranya silahkan Masukkan isyarat 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 menyerupai 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, kalau bermanfaat silahkan di sebar ke teman2 sobat
Terima kasih

Baca Juga:  Cara Verifikasi blog di Google Analytics

LEAVE A REPLY

Please enter your comment!
Please enter your name here