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.

<body>
    <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.

    .container {
         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.

Cara Membuat Efek Gambar Terpotong

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 :)

10 September 2019

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