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 :

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
Untuk memanggila kode diatas anda masuk kelaman baru dan terapkan kode dibawah ini dicompose HTML
HTML
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!
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
1. year of Heisei Holem Indonesia Detective Conan
2. Detective Conan Special Edition
3. Price list
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;
}
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;
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
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>
<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!
0 Response to "Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog "
Post a Comment