Cara Membuat Efek Hover Keren Pada Gambar Di Blog

21:18:00
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;

Cara Membuat Efek Hover Keren Pada Gambar Di Blog
Kamu membuatku pasrah dan menyerah...!!!
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,

Cara Membuat Efek Hover Keren Pada Gambar Di Blog


 <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="http://2.bp.blogspot.com/-UniFCIUVY2U/VKFfGyxnxfI/AAAAAAAABmQ/PlFaFJ8U_Ow/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="http://2.bp.blogspot.com/-UniFCIUVY2U/VKFfGyxnxfI/AAAAAAAABmQ/PlFaFJ8U_Ow/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

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

10 Comments

Tsani Aziz 29 December 2014 at 21:28

bang demo nya kagak ada :v

Renaldy Ramadani 29 December 2014 at 21:30

demonya diatas langkah :v

Radito Radito Radito 30 December 2014 at 05:36

Keren bang :hore

Renaldy Ramadani 30 December 2014 at 12:23

Iya gan silakan di coba :v

muhammad royan Firdaus 30 December 2014 at 15:35

bagus gan (y)

Renaldy Ramadani 30 December 2014 at 18:21

thanks gan :v

manfaat bersama 31 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

Renaldy Ramadani 31 December 2014 at 13:08

waduh :v datang lagi nih satriyo.blog :v makasih gan :fb:like

fitri cinta 11 June 2015 at 16:00
This comment has been removed by a blog administrator.