关闭边栏(ESC)打开边栏(ESC)
在给图片添加遮盖阴影效果的时候，前面介绍个一种方法，这里从黑糖2.0种吸取了另一种方法，这个主要是运用了伪元素来处理。
一、html结构：
|
1 2 3 |
<div class="mask-animate"> <img src="" alt=""> </div> |
二、CSS：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.mask-animate { position: relative; -webkit-border-radius: inherit; -moz-border-radius: inherit; border-radius: inherit; display:block; } .mask-animate:hover:after { opacity: 0.5 } .mask-animate:after { opacity: 0.3; background: #000; transition: opacity .4s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; overflow: hidden; display: block } |
三、在结构上，可以在div标签中加入背景图，这样就可以少去img标签，也较好控制图片。
|
1 |
<div class="mask-animate" style="background: url(图片地址); background-repeat: no-repeat; background-size: cover; background-position: center top"> |
效果图如下：
第一种结构用IMG的时候，这个元素也是要转换成块元素：display:block