Membuat Animasi Hover Zoom Menggunakan CSS Transform
Di panduan kali ini sahabat akan belajar bagaimana cara membuat animasi hover zoom menggunakan css transform.
Halo semuanya di kali ini saya akan memberikan sebuah panduan mengenai css yaitu cara membangun animasi hover zoom menggunakan css transform, yang di maskud itu apa ?
Animasi ini mempunyai guna misal ada sebuah gambar dikala di hover karenanya gambarnya akan zoom in dengan pergerakan yang smooth menggunakan transition. animasi ini banyak sekali di peroleh di website-website company profile atau website-website yang menampilkan produk-produk.
Kalau bingung silahkan salin code berikut :
<!DOCTYPE html>
<html lang=en>
<head>
<title>Bootstrap Example</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<style>
img:hover{
transform:scale(1.1);
transition:all 0.90s ease 0s;
}
.gambar{
height: 270px;
overflow: hidden;
width: 270px;
}
</style>
</head>
<body>
<div class=gambar>
<img src=gambar.png>
</div>
</body>
</html>
setelah di salin jangan lupa perhatikan <img src=”gambar.jpg”> , path dari gambarnya sesuaikan dengan nama file dan folder masing-masing, fi sini saya menggunakan gambar.jpg./
bila di jalankan karenanya hasilnya akan seperti ini :
karena saya hanya menggunakan screenshoot karenanya hasil dari animasinya tak akan terlihat, tetapi kalau kalian tak salah pada menulis codenya bila kalian hover di gambar tersebut karenanya akan terlihat animasinya gambar akan ter zoom dengan pergerakan yang lembut.
Oke itu saja dari saya bagi artikel mengenai membangun animasi hover zoom menggunakan css transform , hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
