Membuat Efek Hover Icon Share Pada Gambar

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat efek hover icon share pada gambar. Jadi maksudnya adalah ketika kita arahkan kursor pada gambar maka akan muncul tombol share dengan efek yang sangat bagus. Untuk membuat efek ini kita hanya menggunakan bantuan CSS, di mana property CSS yang kita gunakan adalah Transition, Transform, dan Filter. Nah untuk membuatnya teman-teman bisa ikuti langkah-langkah nya di bawah ini.

Pertama kalian bisa buat satu file dengan nama  index.html, dan buat struktur HTML nya seperti gambar di bawah ini.

Kemudian untuk CSS nya kalian bisa ikuti gambar di bawah ini.

Maka jika kita jalankan hasilnya seperti berikut.

Download

15 Februari 2016

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat