Cara Membuat Efek Zoom Delay pada Gambar

Cara Membuat Efek Zoom Delay pada Gambar - Penggunaan ekef pada halaman website akan memberikan tampilan menjadi jauh lebih menarik. oleh karena itu hampir semua desain website saat ini didalamnya terdapat efek dan animasi agar ketika dilihat oleh pengguna tidak akan membuat bosan. Ada banyak cara dan banyak jenis efek yang bisa ditampilkan pada sebuah halaman website, misalnya saja efek bayangan, warna dan lain sebagainya.

Dikesempatan kali ini saya ingin berbagi tutorial sederhana tentang efek yang bisa kalian buat dengan HTML & CSS, yaitu tutorial Cara Membuat Efek Zoom Delay pada Gambar. Buat kalian yang ingin coba membuatnya bisa kalian ikuti langkah - langkahnya berikut ini.

Untuk membuat efek zoom delay pada gambar sangatlah mudah, yang pertama tentu kalian harus menyiapkan satu gambar sebagai objek dari efek yang akan dibuat nanti. Lalu kalian buat file index.html kemudian kalian ketikan sintak HTML untuk meload atau menampilkan gambarnya seperti berikut.

<body>
    <div class="boxImg">
        <img src="img-1.jpg">
    </div>
</body>

Pada tag img src silahkan kalian isikan gambarnya. Selanjutnya tambahkan style CSS untuk membuat efek zoom delay pada gambar. Silahkan kalian ketikan sintak CSS untuk membuat efek pada gambar seperti berikut.

body {
  margin: 40px auto;
  width: 400px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.boxImg img {
  -webkit-transition: all 1.5s;
}
.boxImg:hover img {
  -webkit-transform: scale(1.1);
}
.boxImg {
  overflow: hidden;
  border: 3px solid black;
  border-radius: 5px;
  display: block;
  height: 300px;
}
.boxImg:hover {
  opacity: 1;
}

Dari sintak diatas, efek pada zoom delay pada gambarnya kita manfaatkan properti transform dan untuk delaynya menggunakan properti transition. Silahkan simpan kembali filenya kemudian kalian buka pada browser dan lihat hasilnya.

Cukup sederhana dan mudah Cara Membuat Efek Zoom Delay pada Gambar, semoga bermanfaat selamat mencoba dan sampai jumpa diartikel selanjutnya.

28 Februari 2020

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