照片墙

照片墙

 

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

注意事项:

(嵌套关系)

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

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

 

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

 

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

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

 

 

 

3.调整图片位置:

Left:-10px;

Top:-10px;

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

 

 

 

完成效果: