img {
transition: all .2s ease-in-out;
}
img:hover {
transform: scale(1.5);
}.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-zoom-out {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 200px;
}
.box-zoom-out img {
max-width: 100%;
transition: all 1s;
-webkit-transform: scale(1);
transform: scale(1);
}
.box-zoom-out:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box-zoom-out">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>