鼠标悬停图片放大(圆形1)
HTML代码
<div class="image_enlarge-container">
<img class="image_enlarge-wrapper ZDY_img" src="AAA">
</div>
CSS代码
<!-------------鼠标悬停图片放大---------------->
<style>
.image_enlarge-container {
border-radius: 50%; /* 将图片形状设置为圆形 */
border: 5px solid rgba(255, 255, 255, 0.7); /* 边框为2像素宽,颜色为灰色 */
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.5); /*--- 添加阴影效果 --*/
display: inline-block;
overflow: hidden;
transition: box-shadow 1s;
}
.image_enlarge-wrapper {
transform: scale(1);
transition: transform 0.6s;
transform-origin: center;
}
.image_enlarge-container:hover .image_enlarge-wrapper {
transform: scale(1.3);   /*--- 放大1.1倍 --*/
}
.image_enlarge-container:hover {
box-shadow: 0 0 20px rgba(22, 141, 210, 1); /* 将阴影颜色修改为蓝色 */
}
	
.ZDY_img {
height:180px;
width:100%;
object-fit: cover;
}
</style>
<!-------------鼠标悬停图片放大---------------->