Membuat Efek Transition dengan CSS

Membuat Efek Transition dengan CSS - Efek Transisi (Transition Effect) merupakan suatu pola animasi dimana akan terjadi pergantian berupa slide pada suatu objek. Banyak sekali contoh pengaplikasian efek transisi pada kehidupan sehari - hari, misalnya saja ketika kita membuat materi presentasi dengan powerpoint, pasti tidak akan lepas dengan animasi - animasi dan efek tranasisi untuk mempercantik tampilan slidenya. Pada website kita juga bisa menerapkan efek transisi, dan banyak sekali cara untuk membuat efek dan animasi untuk mempercantik desain website. jQuery dan CSS adalah salah satu bahasa yang bisa kita gunakan untuk membuat suatu efek dan animasi khususnya efek transisi pada sebuah website. Nah, berikut ini saya akan share bagaimana Membuat Efek Transition dengan CSS.
Baiklah, kita akan mencoba memperaktekan cara Membuat Efek Transition dengan CSS. Namun sebelum memulai praktek, kalian wajib menyiapkan bahan - bahannya terlebih dahulu, yaitu satu buah gambar seperti berikut.

Membuat Efek Transition dengan CSS

Langkah 1 : Membuat Efek Transition dengan CSS

Langsung saja, langkah pertama adalah kalian buat satu file HTML dan ketikan sintak HTML berikut sebagai struktur awal dalam membuat efek transisi.

<body>
    <div id="wrapper">
        <a href="#">
            <div class="box">
                <img class="effect" src="car.jpg">
                <h1>title image</h1>
            </div>
        </a>
    </div>
</body>

Pada sintak img src kalian bisa isikan nama gambar yang sudah disiapkan diawal.

Langkah 2 : Membuat Efek Transition dengan CSS

Langkah selanjutnya, setelah membuat struktur HTML seperti diatas, kita akan mencoba desain tampilan dan membuat efek transisi dengan sintak CSS. Dalam hal ini kita akan membuat efek transisi berupa teks dan garis outline kedalam objek gambar.

body {background-color: #233645;}
#wrapper a:hover .box img,
#wrapper a:focus .box img {
    opacity: 0.8;
    outline: #fff solid 2px;
    outline-offset: -15px;
}
#wrapper h1, .effect {
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;  
    transition: all .7s ease;
}
.box {
    width: 600px;
    position: relative;
    background: yellow;
}
#wrapper {
    width: 600px;
    margin: auto;
    padding: 10px;
}
.box img {
    width: 600px;
    outline: transparent solid 2px;
    outline-offset: 0px;
}
.box h1 {
    font-size: 18px;
    position: absolute;
    color:#fff;
    text-transform: uppercase;
    position: absolute;
    top:40%;
    left:0;
    right:0;
    text-align: center;
    opacity: 0;
}
#wrapper a:hover .box h1,
#wrapper a:focus .box h1 {opacity: 1;}

Setelah semua sintak telah diketikan, simpan filenya kemudian buka dibrowser masing - masing dan lihat hasilnya. Jika kalian melakukan hover atau mengarahkan kursor terhadap gambar, maka akan terjadi efek transisi seperti pada contoh gambar berikut ini.

Membuat Efek Transition dengan CSS

Baiklah, cukup sekian tutorial mengenai bagaimana Membuat Efek Transition dengan CSS. Semoga tutorial ini bisa bermanfaat dan selamat mencoba.

29 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat