Cara Membuat Gallery Dengan Javascript Part 1

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Gallery Dengan Javascript Part 1. Dimana pada kasus kali ini saya akan membuat sebuah gallery foto, dengan menggunakan fungsi Event MouseEnter dan MouseLeave atau bisa kita sebut event hover. Ketika mouse masuk dalam area image maka data src akan diambil dan di tampilkan kedalam layout detail, dengan menggunakan javascript kita dapat membuat sebuah efek salah satu nya gallery foto kali ini.

Pada artikel Cara Membuat Gallery Dengan Javascript Part 1 ini saya bagi menjadi 2 part, part yang pertama adalah membuat layout terlebih dahulu. Dalam hal ini saya menggunakan bootstrap 4, langsung saja kita implementasikan. Teman – teman siapkan text editornya dan siapkan bootstrap 4 nya kemudian siapkan juga image nya, dan ketikkan script di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><strong>Cara Membuat Gallery Dengan Javascript Part 1</strong></title>
	<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-4 item">
					<img src="hero/sm-aeria.jpg" alt="Aeria">
					<p class="bg-warning">Aeria</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-blackheart.jpg" alt="Blackheart">
					<p class="bg-warning">Blackheart</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-celeste.jpg" alt="Celeste">
					<p class="bg-warning">Celeste</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-deathbringer.jpg" alt="Deathbringer">
					<p class="bg-warning">Deathbringer</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-furia.jpg" alt="Furia">
					<p class="bg-warning">Furia</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-grok.jpg" alt="Grok">
					<p class="bg-warning">Grok</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-raven.jpg" alt="Raven">
					<p class="bg-warning">Raven</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-strider.jpg" alt="Strider">
					<p class="bg-warning">Strider</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-tempest.jpg" alt="Tempest">
					<p class="bg-warning">Tempest</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-tyrion.jpg" alt="Tyrion">
					<p class="bg-warning">Tyrion</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-valeon.jpg" alt="Valeon">
					<p class="bg-warning">Valeon</p>
				</div>
				<div class="col-sm-4 item">
					<img src="hero/sm-valeria.jpg" alt="Valeria">
					<p class="bg-warning">Valeria</p>
				</div>
			</div>
		</div>
		<div class="col-sm-6 item align-self-center big-image">
			<img src="hero/xl-aeria.jpg" alt="Aeria">
			<p class="bg-warning">Aeria</p>
		</div>
	</div>
</div>
</body>
</html>

Jika sudah save dengan nama index.html, dan jalankan pada browsernya

Tampilan seperti gambar di atas ini, pada artikel Cara Membuat Gallery Dengan Javascript Part 2 kita akan lanjutkan untuk membuat Event MouseEnter dan MouseLeave dengan menggunakan javascript. Baik, sekian pada artikel kali ini tentang Cara Membuat Gallery Dengan Javascript Part 1 terimakasih dan sampai jumpa.