Cara Membuat Efek Hover Keren Pada Gambar Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips blogging yaitu cara membuat efek hover keren pada gambar di blog, untuk menerapkannya di blog, Anda harus mengikuti beberapa langkah berikut, untuk demo coba Anda dekatkan pointer pada gambar di bawah ini;

Kamu membuatku pasrah dan menyerah...!!!

View

Cuekmu Membuatku Menyerah

Langkah

1. Login pada blog Anda masing-masing,

2. Setelah itu pada menu dashbord pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode ]]></b:skin> dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> ,

 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;
} 

5. Setelah itu untuk penerapannya silakan copy script berikut lalu paste pada artikel Anda, tetapi jangan lupa sebelum meletakan script ini Anda harus mengganti jenis artikel yaitu compose menjadi html,

 <div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cara Membuat Efek Hover Keren Pada Gambar Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecfVtOI7c0EQiLEjj5z6LlRWExSAsbwe7xrM7LDHuox0XTpo4ZO9og15IN2Bx7K-jekl-hcv1Nuuh2xMDPfSYkoIdNweVJKRX-gRoS__dNArlGAY_NNOvwTHTuK0Mc6fcaPYI88O6XoHe/s1600/IMG_20140510_214814.jpg" height="400" title="Cara Membuat Efek Hover Keren Pada Gambar Di Blog" width="400" />
            <br />
<div class="jm-item-description">
Kamu membuatku pasrah dan menyerah...!!!
                <br />
<div class="jm-item-button">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecfVtOI7c0EQiLEjj5z6LlRWExSAsbwe7xrM7LDHuox0XTpo4ZO9og15IN2Bx7K-jekl-hcv1Nuuh2xMDPfSYkoIdNweVJKRX-gRoS__dNArlGAY_NNOvwTHTuK0Mc6fcaPYI88O6XoHe/s1600/IMG_20140510_214814.jpg">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cuekmu Membuatku Menyerah</div>
</div>
</div> 

6. Jangan lupa untuk mengganti deskripsi serta alamat URL gambar Anda.

Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.

Referensi script irvan-efendy.blogspot.com

Share this