Mempercantik Halaman Gallery Dengan CSS3

Artikel Tutorial-Webdesign kali ini akan mencoba membuat halaman gallery cantik dengan CSS3.

Idenya yaitu kita akan membuat image menjadi meredup ketika mouse hover, disaat bersamaan muncul icon zoom, tapi kita tidak akan membuat efek membesarnya.

Kalau anda mengenal Jquery Plugin Lightbox, mungkin anda sudah terbiasa melihat ini.

Gallery Dengan CSS3

Layaknya memasak, kita siapkan dulu bahan-bahan nya.

Logikanya yaitu kita mempunyai sebuah tag anchor a, di dalam tag tersebut kita sisipkan span dan img, kira-kira jika digambarkan akan terlihat seperti berikut ini

Gambaran layer

Struktur HTML

<div class="twd-container">
<a class="img-entry" href="#dog">

<img id="dog" src="images/dog.jpg" alt="" />
</a>

<a class="img-entry" href="#">

<img src="images/bear.jpg" alt="" />
</a>

…..</div>

Code CSS

Pertama kita akan mengatur Container/Bagan dari halaman web kita

	.twd-container{
		margin:30px auto;
		padding:10px;
		width:970px;
		overflow:hidden;
	}

Selanjutnya mengatur posisi gambar

	.img-entry{
		float:left;
		display:block;
		width:300px;
		height:200px;
		margin:10px;
		box-shadow:0px 10px 5px -5px rgba(0,0,0,.5);
	}
	.img-entry img{
		max-width: 100%;
		height: auto;
		width: auto; /* fixing ie bug*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

Menempatkan Icon Zoom sebagai background dari tag span

	.zoom{
		position:absolute;
		display:block;
		width:300px;
		height:200px;
		opacity:0;
		-webkit-transition:opacity 1s ease-in-out;
		-moz-transition:opacity 1s ease-in-out;
		transition:opacity 1s ease-in-out;
		background:rgba(225,225,225,1) url(images/Search.png) center center no-repeat;
	}

Memunculkan Icon Zoom ketika mouse hover

.img-entry:hover .zoom{
	opacity:0.5;
}

Responsive Web
Untuk membuat Website ini Responsive terhadap lebar layar, maka tambahkan script berikut ini. Ukuran layar bisa ditentukan sendiri :) download file untuk melihat script selengkapnya.

@media (max-width:340px){
.twd-container{
width:auto;
}
.img-entry{
float:none;
width:100%;
height:auto;
}
}

Dan hasilnya adalah sebagai berikut:

Oke sekian tutorial singkat ini, semoga bisa mempercantik website yang sedang anda buat

Jangan lupa follow twitter kami @tut_web

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

Tutorial Web Design

Topik

Tags