Belajar CSS (25. image gallery)

Belajar CSS (25. image gallery)

Image gallery

Pada kesempatan kali ini kita belajar membuat image gallery. image gallery kita gunakan misal untuk situs pribadi yang menampilkan foto atau gambar, atau yang lainya yang berkaitan dengan galeri gambar.

berikut contoh pembuatan image galleri

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	div.img {
		margin: 5px;
		border: 1px solid red;
		float: left;
		width: 180px;
	}
	div.img:hover {
		border: 1px solid blue;
	}
	div.img img {
		width: 100%;
		height: auto;
	}
	div.desc {
		text-align: center;
		padding: 10px;
	}
	</style>
	<title>belajar image gallery</title>
</head>
<body>
	<div class="img">
		<a href="gambar1.jpg" target="_blank">
			<img src="gambar1.jpg" alt="apel1">
		</a>
		<div class="desc">Diskripsi disini</div>
	</div>
	<div class="img">
		<a href="gambar2.jpg" target="_blank">
			<img src="gambar2.jpg" alt="apel2">
		</a>
		<div class="desc">Diskripsi disini</div>
	</div>
	<div class="img">
		<a href="gambar3.jpg" target="_blank">
			<img src="gambar3.jpg" alt="apel3">
		</a>
		<div class="desc">Diskripsi disini</div>
	</div>
	<div class="img">
		<a href="gambar4.jpg" target="_blank">
			<img src="gambar4.jpg" alt="apel4">
		</a>
		<div class="desc">Diskripsi disini</div>
	</div>
</body>
</html>

hasil

Diatas merupakan contoh dasar dari image gallery. Coba kita atur agar responsive terhadap screen yang mengakses.

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	div.img {
		border: 1px solid red;
	}
	div.img:hover {
		border: 1px solid blue;
	}
	div.img img {
		width: 100%;
		height: auto;
	}
	div.desc {
		text-align: center;
		padding: 10px;
	}
	* {
		box-sizing: border-box;
	}
	.responsive {
		float: left;
		width: 25%;
		padding: 0 5px;
	}
	@media only screen and (max-width: 800px) {
		.responsive {
			width: 50%;
			margin: 5px 0;
		}
	}
	@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
    .clearfix:after {
    	content: "";
    	display: table;
    	clear: both;
    }
}

	</style>
	<title>belajar image gallery</title>
</head>
<body>
	<div class="responsive">
		<div class="img">
			<a href="gambar1.jpg" target="_blank">
				<img src="gambar1.jpg" alt="apel1">
			</a>
				<div class="desc">Diskripsi disini</div>
		</div>
	</div>
	<div class="responsive">
		<div class="img">
			<a href="gambar2.jpg" target="_blank">
				<img src="gambar2.jpg" alt="apel2">
			</a>
			<div class="desc">Diskripsi disini</div>
		</div>
	</div>
	<div class="responsive">
		<div class="img">
			<a href="gambar3.jpg" target="_blank">
				<img src="gambar3.jpg" alt="apel3">
			</a>
			<div class="desc">Diskripsi disini</div>
		</div>
	</div>
	<div class="responsive">
		<div class="img">
			<a href="gambar4.jpg" target="_blank">
				<img src="gambar4.jpg" alt="apel4">
			</a>
			<div class="desc">Diskripsi disini</div>
		</div>
	</div>
	<div class="clearfix"></div>
	<div style="padding: 10px;">
		<p>kecilkan browser dan lihat bedanya, jika lebar maximal 800px maka akan tampil dengan 2 kolom atau 50% . Jika lebar maximal 500px maka akan menjadi 1 kolom atau 100% </p>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *