照片墙
鼠标滑到每个小图片从中间产生放大效果.
注意事项:
(嵌套关系)
不能在大盒子里直接放图片,每个图片要对应一个父元素(即在每个图片里外面嵌套一个小盒子)(不能一个大的直接扔很多图片,如果这样的话需要形成图片放大时,找不到参照物)
如果图片太大在小盒子里放不下,则设置图片宽度100% 高度100%,需要给小盒子加浮动横向排列
1.需要使鼠标滑过小盒子,图片发生大小更改
2.ImgBox(即img的父元素)加上position:relative形成参照物
Img加上position:absolute,使用z-index:1层级关系让图片在最上层显示
3.调整图片位置:
Left:-10px;
Top:-10px;
点开浏览器检查,hover,手动移动图片到合适的位置即可
完成效果:
来源:https://www.cnblogs.com/yysn/p/12345876.html