Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog

Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog. Ok sobat berikut ini Ane akan membagikan lagi tutorial tentang membuat atau menambahkan animasi pada gambar di blog Blogger Blogspot. Memang pada saat ini lagi populer-populernya template-template blog yang menggunakan efek-efek seperti ini. Efek gambar seperti ini juga dapat anda pasang dibagian homepage blog sobat.



Biasanya animasi seperti ini dipakai oleh blog untuk menggambarkan dan memberikan deskripsi pada barang  atau produk yang di promosikan. Sebelumnya juga mengenai memberikan efek seperti ini pada gambar tapi sedikit berbeda, yaitu tentang membuat gambar dengan panel deskripsi efek slide.
 LIVE DEMO :

DEMO 2

Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor

View

Cofee Capucino

Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor

View

Cofee Capucino

 TUTORIAL

1. Di blogger anda.
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.jm-mainpage {
 padding: 30px 0;
 max-width: 520px;
 margin: 0 auto;
}
.jm-mainpage-box {
 font-size: 13px;
 line-height: 1.5em;
 text-align: center;
}
.jm-mainpage-box > h3 {
    text-transform: uppercase;
 font-family: 'Open Sans Condensed', sans-serif;
}
.jm-item {
 padding: 10px;
 display: inline-block;
 text-align: left;
}
.jm-item-wrapper {
 position: relative;
 padding: 7px;
 background: #E8D7B6;
}
.jm-item-image {
 position: relative;
 overflow: hidden;
}
.jm-item-image img {
 display: block;
}
.jm-item-title {
 position: absolute;
 left: -10px;
 bottom: 17px;
 background: #FF6B0E;
    color: #FFFFFF;
    font-size: 1.4em;
 line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
}
.jm-item-overlay {
 background: #000;
 opacity: 0;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 -webkit-transition: opacity 0.5s ease-in 0s;
 -moz-transition: opacity 0.5s ease-in 0s;
 -o-transition: opacity 0.5s ease-in 0s;
 transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
 opacity: 0.3;
}
.jm-item-button {
 height: 50px;
 width: 50px;
 text-align: center;
 position: absolute;
 left: 50%;
 margin-left: -25px;
}
.jm-item-button a {
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: #FF6B0E;
    text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
 line-height: 50px;
 -webkit-transition: all 0.2s ease-in 0s;
 -moz-transition: all 0.2s ease-in 0s;
 -o-transition: all 0.2s ease-in 0s;
 transition: all 0.2s ease-in 0s;
 text-decoration: none !important;
 display: block;
}
.jm-item-button a:hover {
 background: #3b3b3b;
}
/** first **/
.first .jm-item-button {
 -webkit-transition: all 0.5s ease-in 0.5s;
 -moz-transition: all 0.5s ease-in 0.5s;
 -o-transition: all 0.5s ease-in 0.5s;
 transition: all 0.5s ease-in 0.5s;
 top: -50px;
}
.first .jm-item-wrapper:hover .jm-item-button {
 top: 20%;
}
/** second **/
.second {
 overflow: hidden;
}
.second .jm-item-wrapper .jm-item-title {
 -webkit-transition: all 0.2s ease-in 0s;
 -moz-transition: all 0.2s ease-in 0s;
 -o-transition: all 0.2s ease-in 0s;
 transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
 left: -100%;
}
.second .jm-item-description {
 position: absolute;
 width: 100%;
 height: 100%;
 padding: 10px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 background: rgba(0,0,0,0.4);
 color: #fff;
 top: 100%;
 -webkit-transition: all 0.5s ease-in 0s;
 -moz-transition: all 0.5s ease-in 0s;
 -o-transition: all 0.5s ease-in 0s;
 transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
 top: 0;
}

 Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div class="jm-mainpage-box span6">
<h5>
DEMO 2</h5>
<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cofee Capucino" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq1qUuGKQzx0BWgD4gMQO6AxXtWvSf7-WZZNXaiQhAZ7sbf9s-A9AUi6Hyiuw187jsNsiJT0BZBfdR4fKhGBOopEOjvYg68W3nLFM7selJxfxdkf7FQrxOPRNAHCPzY7Cd_qspTiPJDK_v/s1600/seocips22.jpg" />
   <br />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.<br />
1. Lorem<br />
2. Ipsum<br />
3. Dolor
       <br />
<div class="jm-item-button">
<a href="https://www.blogger.com/blogger.g?blogID=1917338828994767629#">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cofee Capucino</div>
</div>
</div>
</div>
</div>

 Baiamana sob? apakah sobat berhasil Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog sobat? nah sekian tutorial blog untuk saat ini, jangan lupa lihat tutorial blog terbaru lainnya dari seocips dan semoga bermanfaat.