Tutorial kali ini tentang animasi hover dan keterangan pada gambar, berikut langkah-langkanya :
2. Klik template dilanjutkan dengan edit HTML temukan kode
]]></b:skin></style>3. Copy dan paste kode dibawah 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;
}
4. Simpan template jika selesai
5. Untuk memanggil gunakan kode dibawah ini
<div class="jm-mainpage-box span6"> <h5> </h5> <div class="jm-item second"> <div class="jm-item-wrapper"> <div class="jm-item-image"> <img alt="Judul " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMFTYTBIcz2XkAY2RK-5jigRbrQv4kKoplDh8Hf56XtHf2OztLGhC6i2OBI2FaJn6KVO_Ugck1Sg5BTxW2-ltvKpa1BnbP3SVxkyC03ysRRMqKaha9kMAzWOshSuGieHQPtXYvwwbBKS3/s1600/1122.jpg" /> <br /> <div class="jm-item-description"> Keterangan gambar anda tulis disini.<br /> <br /> <div class="jm-item-button"> <a href="https://www.infoalya.com/">View</a></div> </div> </div> <div class="jm-item-title"> Judul </div> </div> </div> </div>
6. Publikasikan jika selesai
Keterangan :
1. Berwarna merah ganti dengan judul gambar anda
2. Berwarna biru ganti dengan URL gambar anda
3. Berwarna orange ganti dengan keterangan gambar anda
4. Berwarna hijau ganti dengan URL tujuan anda
Thank's for dte.web.id (mas Taufik Nurrohman)