用CSS使文章中的图片(无链)鼠标悬停时出现放大效果

html-css061

用CSS使文章中的图片(无链)鼠标悬停时出现放大效果,第1张

img:hover{}设置宽高属性,比默认情况大就行。注意与周围元素的协调,避免放大后布局错乱。

不过这类行为范畴的东西最好交由JS来完成。

还有就是IE6对元素伪类支持不好,hover有bug。测试的时候要注意。

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例: