CSS溢出实现一个图片放大的效果
2016-04-06 18:55
555 查看
关于溢出的基本属性
overflow:visible/hidden/scroll/auto/inherit;
visible:默认值,内容不会被修剪,会成现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
举个栗子
html
css
将鼠标移动到图片上后给一个hover效果,让img放大,然后让放大出div的部分隐藏,就可以实现下面这个功能了
overflow:visible/hidden/scroll/auto/inherit;
visible:默认值,内容不会被修剪,会成现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
举个栗子
html
<div> <img src="images/1.png"> </div>
css
img{width: 200px;height: 200px;} img:hover{width: 250px;height: 250px;} div{margin: 50px 0;width: 200px;height: 200px;} div:hover{overflow: hidden;}
将鼠标移动到图片上后给一个hover效果,让img放大,然后让放大出div的部分隐藏,就可以实现下面这个功能了
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码