第七周学习

关于鼠标悬浮照片时,照片上的灰色遮盖层平滑滑出.

结构代码如下

首先创建一个父元素,用来装图片和遮盖层,注意,遮盖层和图片为兄弟元素

对父元素进行常规定义,宽高和图片统一化,取消外边框和内边框.display和浮动非重点,可不写

重点在于相对定位,只有开启相对定位遮盖层的绝对定位才能以父元素为基准定位,

**注意overflow:hidden是清除溢出元素,如果加入这个,遮盖层超出父元素的部分将无法看到,这个属性最好在调试完成后加入,

对遮盖层进行设置,首先开启绝对定位,移出文档流,其次设置top和left为0可以完美遮盖图片,宽高百分比或者像素均可,背景的rgba,前三个参数设置颜色,第四个设置透明度

z-index调控层数,保证覆盖图片(最好写上,不写某些情况也可以覆盖)

transition:all 时间;

设置动画时间

该选择器为悬浮x4的时候执行.overlay,

transform:translate(_);为平移,如果想进行二维移动,只需要将括号里再加入一个参数,逗号隔开.

例如transform:translate(x,y);,此处参数可以为百分比,也可以为像素,视情况写.