Cara Menskalakan Elemen Saat Melakukan Hover

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 2, 2021

Di bawah ini kita akan mempelajari cara memperbesar / menskalakan elemen saat melayang dengan CSS.

Zoom saat Melakukan Hover

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.zoom {
  padding: 50px;
  background-color: red;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
</style>
</head>
<body>

<h1>Zoom on Hover</h1>
<p> Arahkan kursor ke elemen div.</p>
  
<div class="zoom"></div>

</body>
</html>

Cara Memperbesar di Hover

Contoh

<style>
.zoom {
  padding: 50px;
  background-color: red;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Catatan: jika zoom terlalu besar, zoom akan keluar dari viewport) */
}
</style>

<div class="zoom"></div>