css图片只在图片内部动 |css 圆外光圈

img {
position: relative; /* 使图片相对定位 */
}
img:hover:before {
content: ""; /* 生成一个伪元素 */
position: absolute; /* 将伪元素绝对定位在图片上 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 给伪元素设置半透明黑色背景 */
transition: all 0.5s ease; /* 添加过渡效果 */
opacity: 0; /* 初始时伪元素不可见 */
}
img:hover:before {
opacity: 1; /* 当鼠标移入图片时，将伪元素设置为可见 */
}

以上代码中，大家让图片相对定位，并在hover状态下添加一个相对于图片绝对定位的伪元素，给伪元素设置半透明黑色背景，使得图片被遮盖。当鼠标移入图片时，将伪元素设置为可见，图片就呈现出动画效果。

综上所述，通过CSS实现图片只在图片内部动是一种简单而实用的效果，可以为网页增添一份动感和生气。