css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效

这是一款CSS3鼠标hover图片超酷遮罩层动画特效。该特效中，当鼠标悬停在图片上面的时候，左右两个遮罩层会向中间收缩，最后合成一个完整的遮罩层。效果截图如下：

HTML代码

Williamson

Miranda Roy

CSS

.box{font-family: 'Dosis', sans-serif;position: relative;overflow: hidden;}.box:before,.box:after{content: '';background: linear-gradient( #000dff 0%,#6b73ff 100%);height: 150%;width: 100%;border-radius: 0 100% 0 0;opacity: 0;position: absolute;left: -50%;top: 100%;z-index: 1;transition: border-radius .5s ease-out,top .5s ease-out,opacity .3s ease-out;}.box:after{border-radius: 100% 0 0 0;left: 50%;}.box:hover:before,.box:hover:after{top: -50%;opacity: 0.9;border-radius: 0 35% 0 0;}.box:hover:after{ border-radius: 35% 0 0 0; }.box img{width: 100%;height: auto;}.box .box-content{color: #fff;text-align: center;width: 80%;opacity: 0;transform: translateX(-50%) translateY(-50%);position: absolute;top: 50%;left: 50%;z-index: 2;transition: all 0.3s ease 0.2s;}.box:hover .box-content{ opacity: 1; }.box .title{font-size: 25px;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;margin: 0 0 7px;}.box .post{font-size: 18px;font-weight: 600;letter-spacing: 1px;text-transform: capitalize;margin: 0 0 10px;display: block;}.box .icon{padding: 0;margin: 0;list-style: none;}.box .icon li{margin: 0 5px;display: inline-block;}.box .icon li a{color: #fff;background: transparent;font-size: 14px;line-height: 31px;height: 35px;width: 35px;border: 1px solid #fff;border-bottom: none;border-right: none;border-radius: 50%;display: block;transition: all 0.3s ease;}.box .icon li a:hover{color: #fff;box-shadow: 0 0 10px #000;}@media only screen and (max-width:990px){.box { margin: 0 0 30px; }}

Demo源码下载：https://tc5.us/file/21793581-404992058