Pada tutorial kali ini anda akan beajar bagaimana cara membuat animasi hover zoom menggunakan css transform.
Hai semuanya pada kali ini saya akan memberikan sebuah tutorial tentang css yaitu cara membuat animasi hover zoom menggunakan css transform, yang di maskud itu apa ?
animasi ini memiliki fungsi misal ada sebuah gambar saat di hover maka gambarnya akan zoom in dengan pergerakan yang smooth menggunakan transition. animasi ini banyak sekali di temukan pada 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 menggunkan gambar.jpg./
bila di jalankan maka hasilnya akan seperti ini :
karena saya hanya menggunakan screenshoot maka hasil dari animasinya tidak akan terlihat, tetapi jika kalian tidak salah dalam menulis codenya bila kalian hover pada gambar tersebut maka akan terlihat animasinya gambar akan ter zoom dengan pergerakan yang lembut.
oke itu saja sdari saya untuk artikel tentang membuat animasi hover zoom menggunakan css transform , sampai bertemu pada artikel selanjutnya.
The post Membuat Animasi Hover Zoom Menggunakan CSS Transform appeared first on Kursus Website Terbaik.