鼠标悬停图片放大(矩形)

HTML代码:

<div class="image_enlarge-container">
<img class="image_enlarge-wrapper ZDY_img" src="图片链接">
</div>

CSS代码:

<!-------------鼠标悬停图片放大---------------->
<style>
.image_enlarge-container {
display: inline-block;
overflow: hidden;
}

.image_enlarge-wrapper {
transform: scale(1);
transition: transform 0.5s;
transform-origin: center;
}

.image_enlarge-container:hover .image_enlarge-wrapper {
transform: scale(1.1);   /*--- 放大1.1倍 --*/
}

.ZDY_img {
height:180px;
width:100%;
object-fit: cover;
}
</style>
<!-------------鼠标悬停图片放大---------------->