Effect Hover jQuery pada Gambar
Hallo teman teman kali ini kita akan belajar bagaimana membangun Effect Hover jQuery di Gambar, oke seketika saja kita praktekan yah teman teman.
Pertama-tama kalian siapkan struktur HTML nya , dan sambungkan jQuery dan bootstrap 4 nya, karena disini saya akan membangun css nya dari boostrap 4 supaya lebih gampang dan bagus tampilannya. berikut tampilannya.
setelah itu kita bikin class container bootstrapnya, bikin di pada tag body yah teman teman berikut contoh code nya
<div class=container>
<div class=row>
<div class=col-8 offset-2>
<br>
<!-- gambar -->
<img id=htmlsrc=html.png>
<img id=css src=css.png>
<img id=js src=javascript.png>
<!-- keterangan gambar -->
<p class=html><strong>Hypertext Markup Language (HTML)</strong> yakni sebuah bahasa markah yang digunakan bagi membangun sebuah halaman web, menampilkan beragam informasi di pada sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis pada berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. </p>
<p class=css><strong>Cascading Style Sheet (CSS)</strong> adalah aturan bagi mengatur beberapa komponen pada sebuah web sehingga akan lebih terstruktur dan seragam. <b>CSS</b> bukan adalah bahasa pemograman.</p>
<p class=js><strong>JavaScript</strong> pertama-tama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi <b>JavaScript</b></p>
</div>
</div>
</div>
saya mempunyai tiga tag img berikut idnya masing masing saya beri nama id nya html, css, dan js. setelah itu saya membangun tiga buah tag p dengan masing masing class nya, yaitu class html, css, js yang di dlaamnya yakni keterangan bagi masing masing gambarnya, dimana ketika kita hover salah satu gambarnya karenanya keterangan masing masing gambarnya akan muncul, seperti itu idenya.
nah setelah itu kalian dapat siap kan 3 buah gambar yah teman teman dan tiga buah gambarnya itu beri nama masing masing, biar lebih relevan beri nama html, css, dan javascript seperti contoh berikut.
setelah itu kita ke bagian jQuery nya kita tadi telah menyiapkan script bagi jQuery nya, dan di dalamnya kita bikin bagi manfaat nya masing masing, berikut fungsinya,
di atas saya beri komentar di tiap tiap manfaat nya maksudnya di tiap tiap manfaat gambarnya bagi masing masing. nah bagi hasilnya seperti gambar berikut.
bila kita hover ke gambar html karenanya text yang menerangkan mengenai HTML akan muncul dan backgroundnya akan berubah menjadi abu abu begitupun bila kita hover gambar CSS dan Javascript manfaat nya akan sama, dan bila kita tak hover karenanya background akan kembali normal dan text akan menghilang.
demikianlah panduan Effect Hover jQuery di Gambar semoga bermanfaat yah teman teman
Sumber https://kursuswebsite.org
