0 Cara Membuat Efek Animasi Hover Untuk Gambar Di Blogger

 

Dalam posting ini kita dapat melihat efek menakjubkan yang dapat Anda tambahkan ke gambar yang Anda gunakan dalam posting blog Anda, luar biasa sederhana dan sangat cepat sehingga tidak akan memperlambat Anda buka halaman efek time.mirip dengan apa yang akan Anda lihat di banyak Feature tulisan Gadget, ketika kursor lewat di atas gambar sebuah gambar

Kode yang akan kita gunakan tidak menggunakan Javascript ini memastikan akan memuat cepat dan seperti yang saya katakan tidak memperlambat kode blog.The Anda semua murni CSS3 (Jangan Khawatir saya Akan Jadikan Simple) sehingga Anda memiliki efek mengalir dan transparan dengan dengan tepi bayangan stylish sekitar gambar.

OK Tapi, Sebelum saya tunjukkan demo Anda harus catat sementara ini effect gambar akan bekerja dengan browser lebih baik dan bekerja sempurna di Firefox dan Chrome .
  

Screenshot

  

Jokowi could be game changer in 2014 Jokowi topped the list of the 12 most electable politicians for the presidential election with 21.2 percent of respondents saying they would vote for him if the election was held today.

Langkah 1. Masuk ke Blogger Dashboard Klik> Desain> Edit Html

 


Langkah 2. Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk pencarian untuk membantu menemukan kode )

]]></b:skin>

Langkah 3. Copy Dan Paste Kode Berikut Langsung diatas / Sebelum]]> </ b: skin> 

Pastikan Anda Dapatkan Semua Kode

 <!--Start Image Caption Css-->
#image-hover {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
<!--End Image Caption Css, Info : http://draftbloger.blogspot.com -->  

Itulah kode Css untuk membuat efek yang ditambahkan ke template Anda, Langkah berikutnya adalah script gambar itu sendiri. pada saat posting

Bila Anda ingin menggunakan efek ini pada gambar di copy posting kode di bawah, tempel ke posting Anda dan kemudian menambahkan URL gambar dan teks seperti yang ditunjukkan. 

<div id="image-hover">
<div id='figure'>
<img src="IMAGE-URL-HERE"/>
<span class='caption'>
<b>Title Here..</b>
Description Here...
</span>
</div>
</div>

Anda  perlu menambahkan URL gambar dan teks seperti yang ditunjukkan bawah:

IMAGE-URL-HERE : Ganti Dengan URL Gambar Anda Ingin Gunakan.
TITLE HERE : Ganti Dengan Sebuah Image Title Atau Teks lain.
DESCRIPTION HERE : Ganti Dengan Sebuah Keterangan Gambar Atau Text lainnya.