Cara Mudah Menambahkan Animasi Profesional Image Hover Pada Blog dengan CSS3

Bagaimana cara menghias blog dengan animasi pada gambar menggunakan css3.

Teman - teman pernah lihat thumbnail image pada website dan ketika kita hover muncul ikon zoom-in yang dapat diklik untuk melihat gambar yang lebih besar dan jelas? Sudah pasti ada animasi efek blog transisi yang menarik disana bukan? Pada tutorial kali ini saya akan membahas tentang cara mudah membuat image hover menggunakan css3 yang profesional dan elegan, semua gambar yang saya gunakan pada demo berasal dari freepik, demo bisa langsung dicek dibawah. Cara menghias blog dengan menambahkan animasi pada blog adalah seperti berikut.

Markup

            <li class="gambar efek_1">
                <figure>
                    <img src="http://www.tutorial-webdesign.com/wp-content/uploads/2015/10/1.jpg"/>
                    <figcaption>
                        <a href="#"><span class="fa-search-plus"></span></a>
                    </figcaption>
                </figure>
            </li>
            .......

Pada bagian markup html saya menggunakan beberapa tag html5 yaitu figure dan figcaption yang wajib digunakan untuk menampilkan gambar pada html5, figcaption berfungsi sebagai tempat caption gambar. Untuk simbol zoom-in nya saya menggunakan font awesome yang sebelumnya sudah saya link kan didalam tag head website.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Cara memanggil simbol zoom-in dari font awesome adalah dengan menambahkan class "fa-search-plus" pada tag span dan membuat menaruh properti font-family dengan value "fontAwesome".

Dibawah ini adalah style untuk menyusun gambar agar menjadi satu baris.

CSS

*{
    margin : 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
    text-decoration: none;
}

.grid{
    margin: 0;
    list-style: none;
    padding: 20px;
    text-align: center;
    margin: 0;
    position: relative;
}

li{
    display: inline-block;
    width: 400px;
    margin: 0;
    padding: 10px;
}

li figure{
    overflow: hidden;
    position: relative;
}

li figure img{
    width: 100%;
    position: relative;
    display: block;
}

Seperti biasa saya meletakkan css resetnya paling atas. Saya menggunakan teknik yang sama dengan Membuat Animasi Button Hover dengan CSS3 yaitu dengan membuat bagian figcaption menjadi position "absolute" sehingga akan membuat efek menimpa dengan objek yang lain, itu sebabnya pada bagian figure saya buat position "relative" agar efek absolutenya berfungsi. Pada bagian "img" saya set width menjadi 100% yang akan memenuhi lebar "li" yang 400px.

Efek 1

/*efek 1*/

.efek_1 figure figcaption{
    position: absolute;
    background-color: #34495e;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-opacity: 0;
    opacity: 0;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.efek_1 figure figcaption a{
    color: #fff;
}

.efek_1 figure figcaption span{
    position: absolute;
    font-family: fontAwesome;
    font-size: 55px;
    top: 50%;
    left: 30%;
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform : translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.efek_1 figure:hover figcaption{
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.efek_1 figure:hover figcaption span{
    -moz-opacity: 1;
    opacity: 1;
    left: 50%;
}

/*efek 1*/

Seperti yang saya katakan sebelumnya pada bagian figcaption saya buat position "absolute". Pada efek pertama icon zoom akan datang dari kiri sebanyak 30% lalu berhenti di tengah - tengah dengan opacity "1".

Efek 2

/*efek 2*/

.efek_2 figure figcaption{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #34495e;
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform : translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.efek_2 figure figcaption a{
    color: #fff;
}

.efek_2 figure figcaption span{
    position: absolute;
    font-family: fontAwesome;
    font-size: 55px;
    top: 50%;
    left: 50%;
    -moz-transform : translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}

.efek_2 figure:hover figcaption{
    width: 100%;
    height: 100%;
    -moz-opacity: 0.8;
    opacity: 0.8;
}

/*efek 2*/

Pada efek kedua ini kuncinya terletak pada properti left : 50%, top: 50% dan juga properti transform, itu berguna agar posisi figcaption tepat ditengah walaupun pada saat width nya dinaikkan.

Efek 3

/*efek 3*/

.efek_3 figure figcaption{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 209%;
    height: 0;
    background-color: #34495e;
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform : translate(-50%,-50%) rotate(45deg);
    -webkit-transform : translate(-50%,-50%) rotate(45deg);
    transform : translate(-50%,-50%) rotate(45deg);
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.efek_3 figure figcaption a{
    color: #fff;
}

.efek_3 figure figcaption span{
    position: absolute;
    font-family: fontAwesome;
    font-size: 55px;
    top: 50%;
    left: 50%;
    -moz-transform : translate(-50%,-50%) rotate(-45deg);
    -webkit-transform : translate(-50%,-50%) rotate(-45deg);
    transform : translate(-50%,-50%) rotate(-45deg);
}

.efek_3 figure:hover figcaption{
    -moz-opacity: 0.8;
    opacity: 0.8;
    height: 200%;
}

/*efek 3*/

Pada efek ketika saya tambahkan rotasi sebanyak 45 derajat pada figcaption yang akan menghasilkan efek miring pada figcaption.

Animasi pada blog dapat membuat user interface pada blog teman - teman menjadi lebih menarik, animasi buat blog juga dapat membuat user experience pengguna juga akan menjadi lebih baik.
Sekian tutorial singkat yang saya berikan semoga dapat membantu dan menambah referensi anda dalam berkreasi dengan website anda, silahkan komentar jika ada pertanyaan dan share artikel ini jika ini membantu anda, terima kasih.