照片墙

天大地大妈咪最大 提交于 2020-02-22 17:24:59

照片墙

 

鼠标滑到每个小图片从中间产生放大效果.

注意事项:

(嵌套关系)

不能在大盒子里直接放图片,每个图片要对应一个父元素(即在每个图片里外面嵌套一个小盒子)(不能一个大的直接扔很多图片,如果这样的话需要形成图片放大时,找不到参照物)

 如果图片太大在小盒子里放不下,则设置图片宽度100% 高度100%,需要给小盒子加浮动横向排列

 

1.需要使鼠标滑过小盒子,图片发生大小更改

 

2.ImgBox(img的父元素)加上position:relative形成参照物

Img加上position:absolute,使用z-index:1层级关系让图片在最上层显示

 

 

 

3.调整图片位置:

Left:-10px;

Top:-10px;

点开浏览器检查,hover,手动移动图片到合适的位置即可

 

 

 

完成效果:

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!