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

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

Catatan pinggir

Obrolan pembaca 8

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

Tsani Aziz29 December 2014 at 21:28
bang demo nya kagak ada :v
Radito30 December 2014 at 05:36
Keren bang :hore
Renaldy Rizki Ramadani30 December 2014 at 18:21
thanks gan :v
Satriyo7631 December 2014 at 13:05
Gambarnya itu loh..cuekmu membuat putus asa..tetap semangat,yg cuek gelitikin aja..wkwkwk, btw efek hover imagenya keren sob..

salam satriyoku.blog
cerita tante girang11 June 2015 at 16:00
This comment has been removed by a blog administrator.

Cara Membuat Efek Hover Keren Pada Gambar Di Blog

Obrolan pembaca 8

Comments

Post a Comment

Kontak

Cari tulisan

Pantau tulisan baru

Paspor Pembacaku

Baca juga

Comments

Post a Comment

Kontak