Cara Membuat Effect Overlay Pada Gambar Menggunakan CSS

Hallo teman-teman DUMET School, ketemu lagi dengan saya di Blog DUMET School, pada kesempatan kali ini saya akan mengajarkan bagaimana caranya membuat Effect Overlay Pada Gambar Menggunakan CSS. Effect Overlay maksudnya adalah membuat Effect pada sebuah gambar dimana ketika kita arahkan kursor pada gambar tersebut maka akan terdapat effect yang muncul di atas gambar tersebut. Effect ini bisa kita buat menggunakan jQuery atau CSS, nah di sini saya akan mengajarkan bagaimana cara membuatnya menggunakan CSS. Baik kita akan langsung saja membuatnya ya teman-teman.

Hal pertama yang perlu kalian buat adalah kalian bisa buat satu file dengan nama index.html, dan tuliskan baris program HTML dibawah ini.

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

Perhatikan pada CSS di atas untuk membuat Effect Overlay ini saya menggunakan fungsi property CSS yaitu position: relative; dan position: absolute; dimana saya memberikan property position: relative; pada gambar baju dan position: absolute;, top: 0;, left: 0;  pada icon search, jadi nanti ketika kita arahkan kursor ke gambar baju maka akan muncul icon search di atas gambar baju tersebut, dan untuk membuat transparent background-color yang ada pada Overlay tersebut kita menggunakan fungsi property CSS yaitu Opacity.

Maka hasilnya akan seperti berikut ini.

See the Pen Qygbza by Dumet_School (@dumet_school) on CodePen.

Sangat mudah ya teman-teman, hanya dengan CSS kita mampu membuat Effect yang sangat bagus.

Download