Effect Hover jQuery pada Gambar

Hallo teman teman kali ini kita akan belajar bagaimana membuat Effect Hover jQuery pada Gambar, oke langsung saja kita praktekan yah teman teman.

Pertama kalian siapkan struktur HTML nya , dan sambungkan jQuery dan bootstrap 4 nya, karena disini saya akan membuat css nya dari boostrap 4 supaya lebih mudah dan bagus tampilannya. berikut tampilannya.

setelah itu kita buat class container bootstrapnya, buat di dalam 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="html"	src="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> adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. </p>
			<p class="css"><strong>Cascading Style Sheet (CSS)</strong> merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. <b>CSS</b> bukan merupakan bahasa pemograman.</p>
			<p class="js"><strong>JavaScript</strong> pertama 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 membuat tiga buah tag p dengan masing masing class nya, yaitu class html, css, js yang di dlaamnya adalah keterangan untuk masing masing gambarnya, dimana ketika kita hover salah  satu gambarnya maka keterangan masing masing gambarnya akan muncul, begitu idenya.

nah setelah itu kalian bisa 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 sudah menyiapkan script untuk jQuery nya, dan di dalamnya kita buat untuk fungsi nya masing masing, berikut fungsinya,

di atas saya beri komentar di tiap tiap fungsi nya maksudnya di tiap tiap fungsi gambarnya untuk masing masing. nah untuk hasilnya seperti gambar berikut.

bila kita hover ke gambar html maka text yang menerangkan tentang HTML akan muncul dan backgroundnya akan berubah menjadi abu abu begitupun bila kita hover gambar CSS dan Javascript fungsi nya akan sama, dan bila kita tidak hover maka background akan kembali normal dan text akan menghilang.

sekian tutorial Effect Hover jQuery pada Gambar semoga bermanfaat yah teman teman