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.

Membuat Animasi Button Hover dengan CSS3

Membuat Animasi Button Hover dengan CSS3 - Seiring berkembangnya waktu dan juga teknologi maka berkembang pula kreatifitas para web designer dalam memperindah tamplian website yang didevelopnya. Dulu kita sering melihat button yang berubah warna ketika pointer mouse kita letakkan diatas button, ada juga yang membuat warna tulisannya yang berubah. Semua itu sudah berkembang menjadi jauh lebih baik seperti pada demo yang saya buat berikut ini.

Dalam tutorial ini saya akan memberikan satu efek animasi yang saya gunakan pada tombol demo saya yang diatas.

Markup

<body>
    <div class="container">
        <button class="btn btn_effect">Button</button>
    </div>
</body>

Tombol diatas dibuat menggunakan tag button yang saya beri class "btn" dan juga "btn_effect" sebagai selector css. Saya juga menggunakan pseudo element untuk membuat animasi yang akan kelihatan miring sebanyak 45 derajat itu, dan yang terkahir saya memberikan efek opacity agar animasinya terlihat lebih keren sob.

Karena interface tombol bawaan sangat jelek dan membosankan jadi kita buat dulu style tombol kita sendiri, kodenya sebagai berikut.

.btn{
    padding: 25px 80px;
    cursor: pointer;
    overflow : hidden;
    background: none;
    border: 3px solid #3498db;
    border-radius: 0;
    color: #3498db;
    font-size: 23px;
    position: relative;
    z-index : 1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

Position relative saya berikan karena saya ingin membuat pseudo element button ini position absolute, perlu diingat bahwa position absolute tidak akan memberikan efek apa-apa jika tag parentnya position: static, dan perlu diingat juga position default dalam css adalah static.
Overflow hidden membuat elemen yang keluar dari border class "btn" tidak akan kelihatan alias terpotong alias disembunyikan :D.

Berikut adalah style default untuk pseudo element yang saya bicarakan sebelumnya.

.btn:before{
    position: absolute;
    content: '';
    z-index: -1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

Position absolute akan membuat posisi pseudo element berpatokan kepada tag parentnya.
Ini dia kunci dari membuat animasi button hover dengan css3.

.btn_effect:before{
    width: 100%;
    height: 0;
    background-color: #3498db;
    -moz-opacity: 0;
    opacity: 0;
    top: 50%;
    left: 50%;
    -moz-transform : translate(-50%,-50%) rotate(45deg);
    -webkit-transform : translate(-50%,-50%) rotate(45deg);
    transform : translate(-50%,-50%) rotate(45deg);
}

Kita akan membuat warna background pseudo element sama dengan border button yang sudah kita buat. Trik agar pseudo element tersebut bisa miring 45 derajat ada pada properti transform rotate, properti transform translate x dan y kita buat -50% agar posisi pseudo element tetap ditengah walaupun pada saat value dari properti heightnya dinaikkan.

.btn_effect:hover:before{
    height: 240%;
    -moz-opacity: 1;
    opacity: 1;
}

Kode diatas mendeskripsikan ketika class "btn_effect" dihover maka pseudo element before akan mendapatkan properti height dan opacity.
Dan sebagai sentuhan terakhir kita berikan kepada tulisan "button" pada tombol sebagai berikut.

.btn:hover{
     color : #fff;
}

Kalau teman - teman merasa artikel ini bermanfaat silahkan dishare dan berikan comment jika ada dari kode diatas yang tidak dimengerti, efek - efek lain yang ada pada demo kurang lebih menggunakan properti css yang sama hanya berbeda dibagian valuenya saja. Semoga artikel ini bermanfaat dan dapat menjadi referensi buttoh hover teman - teman, terima kasih.

Langkah Tepat Memulai Web Desain dan Web Development

Langkah Tepat Memulai Web Desain dan Web Development - Artikel ini adalah artikel pengantar bagi teman - teman yang ingin memulai untuk membangun dan mendesain sebuah website mulai dari nol tanpa ada bantuan tool - tool pembangun website (web builder). Jika teman - teman ingin menjadi web developer atau web desainer yang handal mungkin artikel ini bisa sedikit membantu dan mengarahkan teman - teman untuk mempelajari step - step yang tepat dan terstruktur untuk membangun website.

picture by: despreneur.com

Dari apa yang saya alami, membangun website terbagi menjadi dua bagian yaitu web desainer dan web developer. baca juga: tugas web desainer, web developer dan web master

Web desainer dituntut memiliki kemampuan dalam bahasa pemrograman berupa html, css, jquery dan juga mampu untuk memanipulasi gambar maupun video serta yang terpenting adalah daya kreatifitas yang tinggi dan baik, sedangkan web developer dituntut untuk memiliki pemahaman yang baik pada bahasa pemrograman berupa html, php, mysql, javascript dan logika serta pemecahan masalah yang baik. Melihat apa yang terjadi di lapangan kebanyakan masalah yang terjadi pada saat mempelajari web developing maupun web desaining adalah karena ketidakpahaman terhadap baris kode yang dibuat, disini sebisa mungkin saya akan menjelaskan setiap baris kode yang dibuat agar teman - teman sekalian dapat memahaminya. 

Dari bahasa pemrograman yang saya sebutkan diatas tadi kita bisa mengambil kesimpulan bahwa html adalah mutlak harus dikuasai baik web developer maupun web desainer, dikarenakan html adalah dasar dari pembuatan website. Dalam membangun website bahan - bahan yang anda perlukan adalah 4 buah web browser yaitu mozilla firefox, google chrome, opera, safari, dan internet explorer. Kita memerlukan semuanya untuk melihat hasil dari tampilan web yang kita buat karena kelima browser tersebut mengeksekusi kode program dengan cara yang berbeda. Bahan yang terakhir adalah senjata kita sebagai web developer dan web desainer yaitu text editor. Ada banyak text editor yang tersedia dan bisa didownload dengan gratis tetapi dalam tutorial yang akan saya sampaikan saya menggunakan komodo edit, kalian akan merasakan kemudahan dalam menggunakan komodo edit ini dari pada text editor yang lain :D

Berikut adalah susunan materi dasar yang insyaallah bisa menguatkan pondasi teman - teman untuk menjadi seorang frontend developer
1. Html
2. Css
3. Jquery