Animasi Hover dan Keterangan Pada Gambar

Animasi Hover dan Keterangan Pada Gambar

Animasi Hover dan Keterangan Pada Gambar



Tutorial kali ini tentang animasi hover dan keterangan pada gambar, berikut langkah-langkanya :

1. Login ke akun anda
2. Klik template dilanjutkan dengan edit HTML temukan kode
]]></b:skin>
atau </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://2.bp.blogspot.com/-IISWbVzMLRU/VGDgFtHq06I/AAAAAAAAAxY/Y1fA4T4wP0o/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)

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×