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.
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.
<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.
#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.
Baiklah, cukup sekian tutorial mengenai bagaimana Membuat Efek Transition dengan CSS. Semoga tutorial ini bisa bermanfaat dan selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
