css3图片悬停特效 |postcss bem

img:hover{
-webkit-transform: scale(1.1); /* 图片变大 */
transform: scale(1.1);
opacity: 0.8; /* 透明度变为0.8 */
}

上述代码使用:hover选择器，表示当鼠标悬停在图片上方时，执行下面的CSS代码。其中，-webkit-transform属性和transform属性可以让图片在悬停时变大，-webkit是Webkit内核浏览器的私有属性，通常只用于Safari和Chrome等浏览器；opacity属性可以改变透明度，这里将透明度降低为0.8，让图片看起来更加柔和。

需要注意的是，这种效果并不适用于所有类型的图片。有些图片过于复杂或过于小，可能会影响用户体验，甚至会降低网站的性能。因此，在使用图片悬停特效时，需要根据具体情况来决定是否使用，以达到最佳的效果。