[分享]css3悬浮图片变宽

CSS3悬浮图片变宽是一种常用的网页设计效果。使用CSS3技术可以实现在悬浮状态下，图片宽度可以变宽的效果。

.img-hover {
    transition: 0.5s;
}

.img-hover:hover {
    width: 120%;
} 

使用上述代码可以实现当鼠标悬浮在.img-hover的元素上时，该元素的宽度会逐渐变宽，效果更加炫酷。其中，通过transition属性设置了元素从初始状态到最终状态的过渡时间为0.5秒，通过:hover伪类选择器实现了鼠标悬浮时元素的变化。

CSS3悬浮图片变宽效果的应用广泛，可以用于图片展示、产品展示、文本引导等多种场景，能够有效地引导用户注意力，提高页面的美观度和交互性。