Membuat Zoom Hover dengan CSS3

Ada banyak strategi agar website kita dikunjungi banyak orang. Salah satunya adalah tentu membuat tampilan website kita menjadi menarik dan interaktif. Dengan begitu pengunjung tidak akan merasa bosan lalu menutup halaman website kita. Dengan merancang tampilan website sedemikian rapih dan memudahkan pengunjung tentu akan berdampak positif pada pengunjung. Sesuai dengan pembahasan kita kali ini, kita akan membuat suatu efek tampilan pada website kita agar lebih keren lagi yaitu membuat zoom hover dengan CSS3.

Bagi kalian yang belum tahu apa itu zoom adalah suatu aksi yang akan dilakukan pada website kita bila mouse berada pada objek yang kita pilih. Misalnya pada menu website kita, saat mouse diarahkan pada objek menu tersebut maka secara langsung background dari menu akan berubah warna. Seperti itu kira-kira kegunaan hover, dan masih banyak contoh hover yang sering digunakan pada website. Dan pada kesempatan kali ini kita akan mencoba membuat hover namun dengan efek zoom. Jadi hover ini dikhususkan untuk objek gambar pada website kita ya.

Langsung saja kita mulai prakteknya, kalian bisa ikuti langkah berikut ini dengan menyalin contoh code dibawah ini.

gambar.html

<html>
<head>
	<meta charset="UTF-8">
	<title>zoom hover</title>
	<style>
		.item{
			width: 300px;						
			border:10px solid grey;
			overflow: hidden;
		}
		.item img{
			-webkit-transition: transform 1.3s; /* For Safari 3.1 to 6.0 */
    		transition: transform 1.3s;
		}
		.item:hover img{
			-ms-transform: scale(1,1); /* IE 9 */
    		-webkit-transform: scale(1,1); /* Safari */
   			 transform: scale(1.5,1.5); /* Standard syntax */
		}
		a:hover h1{
			color:red;
		}
		h1{
			color:#ccc;			
		}
		a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<a href="#">
	<div class="item">
		<img src="spongebob.jpg" alt="" width="100%"><br>		
	</div>
	<h1>Whazzupp !</h1>
	</a>
</body>
</html>

Setelah sudah kalian bisa simpan file tersebut dengan format .html. Untuk melihat hasilnya kalian cukup buka file tersebut pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-zoom-hover-dengan-css3-rangga1-260717

Gambar diatas adalah gambar permulaanya. Sekarang kalian coba geserkan mouse pada gambar tersebut.

membuat-zoom-hover-dengan-css3-rangga2-260717

Maka akan terjadi perubahan dengan efek zoom pada gambar, sehingga pengunjung akan mengetahui bahwa objek tersebut ternyata dapat berubah dan memiliki ketertarikan untuk membuka objek tersebut.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat zoom hover dengan CSS3. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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