HASANONTA - Setelah sebelumnya kita mempelajari tentang dasar-dasar CSS, kali ini kita akan sedikit bermain-main dengan CSS dasar yang sudah kita pelajari. Disini kita akan membuat sebuah gambar mempunyai efek zoom setelah di-hover. Dari pada lama-lama langsung saja cekidot :
Disini saya akan menggunakan sebuah gambar bernama "4.png". Contoh :
index.html
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat Efek Zoom Dengan CSS3 | HasanOnta</h1>
<div class="wrapper">
<div class="zoom-effect">
<div class="kotak">
<img src="4.png"/>
</div>
</div> </div>
</body>
</html>
style.css
.wrapper { width: 700px; margin: 0 auto;}
.zoom-effect { position: relative; width: 100%; height: 360px; margin: 0 auto; overflow: hidden; }
.kotak { position: absolute; top: 0; left: 0; }
.kotak img { -webkit-transition: 0.4s ease; transition: 0.4s ease; width: 700px;}
.zoom-effect:hover .kotak img { -webkit-transform: scale(1.08); transform: scale(1.08);}
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar