css3图片鼠标悬停动画 |jq this的下一级css

img{
position:relative;
width:300px;
height:auto;
transition: all .2s ease-in-out;
/*注意，这里的transition属性是必须的，因为它实现了动画效果*/
}
img:hover{
transform: scale(1.03);
/*鼠标悬停时放大*/
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
/*添加阴影效果*/
}

上面的代码实现了一个非常简单的图片鼠标悬停效果。当鼠标悬停在图片上时，图片会被放大，并添加一个轻微的阴影效果。这个效果可以让图片更加生动，也更加吸引人的注意力。

另外，大家可以通过叠加多个效果来实现更加复杂的图片鼠标悬停效果。比如，在上面的代码中添加一个旋转效果。

img:hover{
transform: scale(1.1) rotateY(180deg);
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

上面的代码实现了一个旋转和放大的效果。当鼠标悬停在图片上时，图片会被放大并向右旋转180度。这个效果可以为你的网站图像添加一些新鲜感和现代性。

总之，使用CSS3实现图片鼠标悬停动画效果非常简单，而且可以让你的网页更加吸引人。尝试上面介绍的技巧，并在您的网站上实现更加复杂和创新的鼠标悬停动画效果。