0,00 Rp

Tidak ada produk di keranjang.

CSS Hover Image

Saya menuliskan tutorial tentang cara membuat image hover yang keren yang ditambah dengan sedikit animasi. Ini bisa digunakan untuk membuat tampilan di galeri photo pada website. Dengan program ini semoga anda bisa membuat image hover yang lain sesuai keinginan anda tentunya. Mari kita simak tutorialnya.

Siapkan text editor mu dahulu.

Step 1

Tulis program dibawah ini lalu simpan dengan nama file index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Css Image Hover Effect</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
 	<div class="box">
 		<div class="imgbox">
 			<img src="photo.jpg">
 		</div>
 		<div class="detail">
 			<div class="content">
 			<h2>Image Hover</h2>
 			<p>Ini Adalah tutorial css image hover effect</p>
 			</div>
 		</div>
 	</div>
 	<div class="box">
 		<div class="imgbox">
 			<img src="img.jpeg">
 		</div>
 		<div class="detail">
 			<div class="content">
 			<h2>Image Hover</h2>
 			<p>Ini Adalah tutorial css image hover effect</p>
 			</div>
 		</div>
 	</div>
 	<div class="box">
 		<div class="imgbox">
 			<img src="photo.jpg">
 		</div>
 		<div class="detail">
 			<div class="content">
 			<h2>Image Hover</h2>
 			<p>Ini Adalah tutorial css image hover effect</p>
 			</div>
 		</div>
 	</div>
 	<div class="box">
 		<div class="imgbox">
 			<img src="photo2.jpg">
 		</div>
 		<div class="detail">
 			<div class="content">
 			<h2>Image Hover</h2>
 			<p>Ini Adalah tutorial css image hover effect</p>
 			</div>
 		</div>
 	</div>
 </div>
</body>
</html>

 

Step 2

Tulis program dibawah ini dan simpan dengan nama file style.css lalu simpan difolder css.

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}
.container {
  width: 1280px;
  margin: 70px auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.container .box {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.container .box .imgbox {
  position: relative;
  overflow: hidden;
}
.container .box .imgbox  img {
  max-width: 100%;
  min-height: 200px;
  transition: 2s;
}
 .container .box:hover .imgbox  img {
  transform: scale(1.2);
} 
.container .box .detail {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(0,0,232,0.3);
  transform: scaleX(0);
  transition: 1s;
}
.container .box:hover .detail {
  transform: scaleX(1);
}
.container .box .detail .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15px;
  color: #fff;
  
}
 .container .box .detail .content h2 {
  font-family: Courier new;
}
 .container .box a {
  cursor: pointer;
}

 

Simpan semua itu di satu folder. Jika kita buka index.html maka nanti tampilannya akan seperti dibawah ini.

Ketika anda mengarahkan mouse ke gambar maka akan tampil tulisan baru pada gambar. Silahkan mencoba dan jangan lupa ngetik, tidak copas, supaya anda mudah untuk memahaminya.

Terima Kasih telah membaca.

***PIU***

 

Reviews

Related Articles