鼠标悬停图片放大(圆形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> <!-------------鼠标悬停图片放大---------------->