Cara Membuat Efek Gambar Terpotong
Cara Membuat Efek Gambar Terpotong - Banyak sekali kreasi desain, efek dan animasi yang bisa kita buat dengan cascading style sheet (CSS). Saat ini CSS menjadi komponen bahasa paling utama dalam membangun desain web, karena memang CSS ditujukan untuk membuat halaman website lebih cantik dan menarik dengan banyak properti yang bisa kita gunakan. Dipembahasan kali ini saya akan berbagi tutorial tentang CSS yaitu bagaimana Cara Membuat Efek Gambar Terpotong. Untuk kalian yang ingin mencoba membuat efek ini silahkan simak langkah - lagkahnya berikut ini.
Untuk membuat efek gambar terpotong silahkan kalian siapkan satu file gambar bebas, kemudian buat satu file index.html dan ketikan kode HTML sebagai struktur untuk membuat efek gambar seperti berikut.
<div class="container">
<img class="image-1" src="img.jpg" />
<img class="image-2" src="img.jpg" />
<img class="image-3" src="img.jpg" />
<img class="image-4" src="img.jpg" />
</div>
</body>
Pada kode img src silahkan kalian isikan sesuai dengan nama file gambarnya. Setelah membuat struktur HTML seperti diatas, langkah selanjutnya mendesain dan membuat efek gambar terpotong - potong dengan kode CSS berikut ini.
width: 600px;
height: 400px;
position: relative;
margin: 30vh auto;
}
.container img {
position: absolute;
top: 0;
left: 0;
}
.image-1 {
clip-path: polygon(0 0, 25% 0, 0 100%, 0 100%);
transform: translate(24px, -147px);
transition: transform 300ms ease;
transform-origin: top;
}
.container:hover .image-1 {
transform: translate(0, 0);
}
.image-2 {
clip-path: polygon(25% 0, 50% 0, 25% 100%, 0 100%);
transform: translate(-50px, 50px);
transition: transform 300ms ease;
}
.container:hover .image-2 {
transform: translate(0, 0);
}
.image-3 {
clip-path: polygon(100% 0, 50% 0, 25% 100%, 75% 100%);
transform: translate(-20px, -30px);
transition: transform 300ms ease;
}
.container:hover .image-3 {
transform: translate(0, 0);
}
.image-4 {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 75% 100%);
transform: translate(-45px, 36px);
transition: transform 300ms ease;
transform-origin: top;
}
.container:hover .image-4 {
transform: translate(0, 0);
}
Setelah kalian ketikan semua kode HTML dan CSS diatas, silahkan simpan kembali file index.html nya, kemudian kalian bisa lihat hasil akhir pada browser masing - masing. Maka tampilan akan terlihat sepert gambar dibawah ini. Jika kalian arahkan kursor terhadap objek gambarnya maka akan terjadi efek yang tadinya gambar terpotong - potong akan kembali menyatu begitu sebaliknya.
Baiklah saya cukupkan tutorial tentang CSS yakni Cara Membuat Efek Gambar Terpotong, semoga tutorial ini bermanfaat dan menambah referensi dalam membuat efek dengan CSS. Selamat mencoba dan sampai jumpa ditutorial selanjutnya :)
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)
