Membuat Animasi Hover Pada Gambar di Blog

Di sini saya akan perkenalkan gaya css3 animasi pada gambar yang dapat menampilkan kode menggunakan efek animasi tersebut. Misalkan Anda akan menyisipkan gambar dengan tampilan akan ada tulisan yang keluar pada saat gambar itu tersentuh pointer mouse atau touch pad.

• Demo

Setelah Anda Melihat demo nya apakah tertarik? Jika tertarik berikut caranya di bawah ini

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

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

Untuk kode pemanggilnya pada mode HTML di postingan, copy kode di bawah ini

<div class="jm-item second">
    <div class="jm-item-wrapper">
        <div class="jm-item-image">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3CYknBoH8n_YBGcOzEPLRsSrA9Ocro96f_kQ9nZq7SIgfSLgxyZ2cHcLPigxjcmYPu0KkkMys7OWmXmR1OxX9f2AN4aqwZ5rokYirzTbqWD4BI9SE2ZQFkwmo55r_I3pJ5IfHg96To-q/s1600/cofee.jpg" alt="Cofee Capucino" />
            <div class="jm-item-description">
                Lorem ipsum dolor sit amet.
                1. Lorem
                2. Ipsum
                3. Dolor
                <div class="jm-item-button"><a href="#">View</a></div>
            </div>
        </div>
        <div class="jm-item-title">Cofee Capucino</div>
    </div>
</div>

Ganti url di atas dengan url gambar anda.

Kemudian Publikasikan. Semoga bermanfaat.