img:hover { opacity: 0.8; transition: opacity 0.3s ease-in-out; }
这个例子是为图片添加透明度变化的效果。当鼠标移动到图片上时,图片的透明度会变成0.8。同时,大家使用了transition属性来使变化更加平滑。
img:hover { transform: scale(1.1); transition: transform 0.3s ease-in-out; }
这个例子是为图片添加缩放效果。当鼠标移动到图片上时,图片会被放大10%。同样地,大家使用了transition属性来使变化更加平滑。
img:hover { filter: grayscale(100%); transition: filter 0.3s ease-in-out; }
这个例子是为图片添加黑白效果。当鼠标移动到图片上时,图片会变成黑白的。大家使用了filter属性来实现这个效果,同样地,也使用了transition属性来使变化更加平滑。
以上是一些常用的CSS图片hover效果的例子,它们可以为网页添加更多的交互性。当然,大家也可以根据不同的需求,自己尝试和创造不同的效果。