xxxxxxxxxx
<!-- HTML -->
<div class="image-container">
<img src="path/to/image.jpg" alt="Image">
</div>
xxxxxxxxxx
img {
transition: all .2s ease-in-out;
}
img:hover {
transform: scale(1.5);
}
xxxxxxxxxx
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
xxxxxxxxxx
.container {
position: relative;
overflow: hidden;
max-width: 300px;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #e5e5e5;
opacity: 0;
transition: .5s ease all;
}
img {transition: .5s ease all; width: 100%; object-fit:cover;}
.container:hover img {
transform: scale(1.1);
}
.container:hover::after {opacity: 0.2;}
xxxxxxxxxx
<!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>