Animasi hover sederhana pada gambar

Dalam artikel ini saya ingin memperkenalkan beberapa CSS3 gaya yang memungkinkan untuk menampilkan kode menggunakan efek Animasi. Seperti misalnya kita akan mengambil produk, yang dapat Anda tampilkan dalam modul HTML kustom joomla. Seperti produk Anda dapat link ke sebuah artikel, ekstensi, atau dimana pun yang Anda inginkan. Mari kita lihat contoh di bawah ini.

DEMO 1

View

Cofee Capucino

DEMO 2

Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor

View

Cofee Capucino

Simak langkah² dibawah ini:

1. Login ke akun blogger Anda.
2. Klik Template Edit HTML.
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script css berikut ini tepat diatas 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;
}

5. Kemudian simpan Template Anda.

Penerapannya:

Supaya kode diatas muncul diposting blog Anda Silahkan buat Entri baru gunakan mode HTML kemudian masukkan kode berikut ini kedalam halaman posting blog Anda.

<div class="jm-item second">
    <div class="jm-item-wrapper">
        <div class="jm-item-image">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy49WYsbdWlFpMa9kZMgQDwt2GtrhecCUnsrTb_hRPLmEf0kSEN_IwSCiUyXBd9JiwfJ-0rAPWHFsBIEEvrwzvf5O8EMZlmyc1jvuGMKEqWHMRejJ9aHFtcz9-ZAA4IkiyYb0FULGd6F9d/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>

Kemudian klik Publish dan lihat hasil-nya.
Sekian tutorial Animasi hover sederhana pada gambar semoga bermanfaat,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250