Animasi Tulisan Gambar Melayang dengan CSS

| | Print This! | 1 comment

Do you like this post?

Sobat Blogger Tutorial semua, kali ini Dunia Tutorial akan menulis trik bagaimana cara membuat animasi gambar dengan teks melayang saat mouse di gerakkan. Trik ini sangat cocok untuk membuat blog tampak profesional.
Lihat demonya disini.
Tertarik ikuti langkah dibawah ini.

• Login ke Dashboard Blog - Rangcangan - Edit Html
• Geser kebawah dan temukan kode ]]></b:skin>
• Copy dibawah ini setelah kode ]]></b:skin>

<!--www.duniatutorial.com-start animated hover-->

#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.64;

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:# d2baea;

color:#B1D7F0;

font-family: Arial, Helvetica, sans-serif;

}

#image-hover .caption b {

text-shadow: 0px 0.6px 0px #B1D7F0;

}

#image-hover .caption {

color: #000000;

line-height: 24px;

font-size: 14px;

text-shadow: 0px 0.6px 0px #000;

}

<!--www.duniatutorial.com-end animated hover-->

• Simpan template 
• Sekarang buat postingan dan pilih Mode Edit Html, copy kode dibawah ini dalam postingan tersebut

<div id="image-hover">

<div id="figure">

<a href="http://www.duniatutorial.com/" target="_blank">

<img src="Alamat Gambar" /></a>

<span class="caption">

Deskripsi Teks Gambar

</span></div>

</div>

• Ganti  http://www.duniatutorial.com/  dengan alamat link yang kamu tuju
• Ganti   Alamat Gambar  dengan alamat link gambar
• Ganti  Deskripsi Teks Gambar  dengan deskripsi gambar Blog sobat Tutorial

Bagi sobat Blogger yang ingin berita yang uptode tentang Dunia Blogger, like page disini dan Follow disini

Selamat mencoba!!

Artikel Terkait

• Animasi Tulisan Gambar Melayang dengan CSS
• Transformer 3 Ala Becak Indonesia
• Menu Horizontal Menawan Menggunakan CSS Murni
• Float Menu HTML menggunakan Jquery dan CSS3 di Blog
• Cara Membuat Menu di Blog
• Cara Membuat Menu Horizontal dengan Css pada Blog
• Teks berjalan menggunakan CSS3
• Tampilkan kode Html, CSS, JavaScript dalam background animasi dengan CSS
• Keren!! Animasi Jam Flash di Blog

Posted in: Animasi,CSS,menu horizontal