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 di mana 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 sobat

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 sobat.

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div class="jm-item second">
    <div class="jm-item-wrapper">
        <div class="jm-item-image">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWkRvn2EkHhqaREM8exeWqbnFWuXsMFzUkz4lfMJ1Rz3hVm_Pm0AmKJ9kFgpEJBveeTfnOSonG4JcbYGHrEQcUUfwj1xctnljc5VSyB5Cbs-DS-WNljnYhPdca0P4jEOjsIozvN6TCq7pA/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 dulu totorial hari ini semoga bermanfaat,..