Membuat Efek Transisi Gambar dengan CSS3

11/04/2018    Risman Hakim    86     Website

Membuat Efek Transisi Gambar dengan CSS3 - Efek transisi pada tampilan website merupakan suatu pola pergantian ataupun kondisi yang ditandai dengan perubahan style atau gaya dari objek yang dikenai efek transisi. Didalam CSS3 kita bisa memanfaatkan properti yang bisa kita gunakan untuk membuat suatu efek transisi terhadap suatu objek, yakni properi transition. Pada kesempatan kali ini akan saya bagikan tutorial untuk membuat efek transisi yakni tutorial Membuat Efek Transisi Gambar dengan CSS3, langsung saja kita praktekan membuat efek transisi berikut ini.

Langkah 1 : Membuat Efek Transisi Gambar dengan CSS3

Sebelum kita memulai membuat efek transisi, kita harus menentukan terlebih dahulu elemen ataupun objek yang akan dijadikan sebagai efek transisi, pada kasus ini objek yan akan saya jadikan sebagai efek transisi adalah sebuah gambar. Untuk itu silahkan kalian siapkan terlebih dahulu satu gambar bebas ataupun kalian bisa download gambarnya dibawah ini.

Membuat Efek Transisi Gambar dengan CSS3

Langkah 2 : Membuat Efek Transisi Gambar dengan CSS3

Setelah menentukan objek yang akan dijadikan efek transisinya, barulah kita mulai untuk mengetikan struktur sederhana HTML dan menyisipkan gambar seperti berikut.

<body>
    <div class="wrapper">
        <div class="box">
            <img src="cat.jpeg">
        </div>
    </div>
</body>

Langkah 3 : Membuat Efek Transisi Gambar dengan CSS3

Setelah membuat struktur sederhana seperti diatas, selanjutnya kita akan membuat efek transisi terhadap objek dalam hal ini objeknya adalah gambar, silahkan kalian ketikan sintak CSS3 berikut ini.

.wrapper {
    width: 500px;
    margin: auto;
}
.box {
  border: 5px solid lightgray;
  width: 480px;
  padding: 2px;
  transition: all 1s;
  display: inline-block;

}
img {
    width: 480px;
}
.box:hover {
  border-color: salmon;
  box-shadow: 0 6px 8px #000;
  margin-top: 10px;

}

efek transisi yang kita buat sekarang ini adalah efek transisi dimana ketika kursor mengarah kearah objek gambar akan terjadi perubahan transisi berupa pergerakan objek dan penambahan efek bayangan pada objek gambar.

Setelah semua sintak telah diketikan, simpan filenya dengan nama index.html, kemudian silahkan kalian buka pada browser masing - masing dan lihat hasilnya. Selesai

Membuat Efek Transisi Gambar dengan CSS3

Bagaimana, menarik bukan efek yang ditampilkan ? Cukup sekian tutorial mengenai bagaimana Membuat Efek Transisi Gambar dengan CSS3, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More