Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog

Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog - Animasi Hover dan deskripsion adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link).

Namun pada kesempatan kali ini saya akan mengulas Membuat Animasi Hover dan Deskripsi Pada Gambar, Animasi Hover dan Deskripsi Pada Gambar adalah untuk menggambarkan dan memberikan deskripsi pada barang atau produk yang di promosikan.

Live Demo :

Animasi Hover dan Deskripsi

Detektive comic conan

1. year of Heisei Holem Indonesia Detective Conan

2. Detective Conan Special Edition

3. Price list

View

Detektive Connan

Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog

1. Masuk keakun Blogger
2. Klik Template » klik Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda anda copas kode dibawah ini diatas kode ]]></b:skin>

CSS

.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: #245071;
}
.jm-item-image {
position: relative;
overflow: hidden;
}
.jm-item-image img {
display: block;
}
.jm-item-title {
position: absolute;
left: -10px;
bottom: 17px;
background: #0252FF;
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: #2852FA;
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;
}

6. Simpan Template

Untuk memanggila kode diatas anda masuk kelaman baru dan terapkan kode dibawah ini di ~~compose~~ HTML

HTML

<div class="jm-mainpage-box span6">
<h5>
DEMO </h5>
<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Detective Conan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJN9DH6UR8Ae3pI2inPOI8z0X3PocsR3t8KFgm_ogAnOYZAwb_OijIZ1fFIKIkhZVq6hEAhn3LHmE3QL_zVRooH572SuNkjh0bWnoFh3jF-6qGEObMIoWwoli8XawHl4iJqqc8OzyBCk/s1600/detektive+connan.jpg" />
<br />
<div class="jm-item-description">
Detektive comic conan<br />
1 Year of Heisei Holmes Indonesian Detective Conan<br />
2. Detective Conan Special Edition<br />
3. Price list
<br />
<div class="jm-item-button">
<a href="https://plus.google.com/105248329877134471578">View</a></div>
</div>
</div>
<div class="jm-item-title">
DETEKTIVE CONAN</div>
</div>
</div>
</div>
</div>

Efek animasi tersebutAnimasi Hover dan dapat juga dipasang dibagian homepage blog, sekian dari saya Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog. semoga bermanfaat!