Membuat Hover dengan Image CSS3

Membuat tampilan website agar terlihat menarik adalah hal yang bisa dibilang cukup mudah. Tergantung dari target seperti apa yang ingin dituju, misalnya kalian membuat website untuk anak-anak. Tentu tema websitenya akan dibuat lebih colorful agar pengunjung khususnya anak-anak akan betah berlama-lama diwebsite kita. Selain tema website, tentu ada elemen lain sebagai penunjangnya, salah satunya adalah membuat website kita menjadi interaktif. Salah satu hal yang dapat membuat website kita lebih interaktif adalah dengan membuat hover. Sesuai dengan pembahasan kita kali ini adalah bagaimana cara membuat hover dengan image CSS3.

Kalian mungkin sudah ada yang tahu apa itu hover. Untuk kalian yang belum tau, hover adalah perintah css untuk memberikan efek perubahan pada suatu objek kita pada saat mouse berada pada objek tersebut. Contohnya yang kalian sering temui pada saat kita akan klik suatu tombol menu diwebsite, sering kali terjadi perubahan warna pada tombol tersebut. Itulah yang dimaksud dengan hover, namun pada kesempatan kali ini kita akan membuat hover dengan 2 buah gambar. Hasilnya seperti apa ? kalian bisa ikuti langkah berikut ini, pertama buat file html terlebih dahulu dengan menyalin code dibawah ini.

gambar.html

<html>
	<head>
		<title>Hover Image</title>				
	</head>
	<body>
		<div class="container">
			<h1>Hover 2 Image</h1>
			<div class="hover">
				<img src="1.jpg" alt="">
			</div>
		</div>
	</body>
</html>

Simpan file tersebut dengan format .html. Sekarang kita lanjutkan untuk styling cssnya, kalian bisa salin code dibawah ini.

style.css

.container{
				width: 300px;
				margin:auto;
				text-align: center;
			}
			.hover{			
				position: relative;
				height: 130px;
				overflow: hidden;
				/*background: red;*/
			}
			.hover img{
				position: absolute;
				left: 90px;
				top:0;
				transition:all 1s linear;		
			}
			.hover img:hover{
				top: -126px;	
				transition:all 1s linear;			
			}

Setelah sudah kalian bisa simpan file tersebut dengan format .css. Dan jangan lupa untuk menyimpan kedua file tersebut dalam satu folder yang sama. Untuk melihat hasilnya kalian bisa buka file htmlnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat hover dengan image 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 *