纯css3实现 transtion过渡效果

css3 鼠标:hover效果会平滑过渡，但鼠标离开，效果消失的太生硬，能不能和：hover一样平滑过渡?

 

<a href="">
    <img src="image/portfolio-03.jpg" alt="">
    <b class="block"></b>
</a>

 

最终实现效果：鼠标划入img上去,b标签以遮罩层的方式出现

 

鼠标移出img,b标签以遮罩层的方式平滑过渡消失

要想利用hover伪类来实现以上效果，

首先:b标签必须在鼠标划入的元素里面，即b标签必须以子元素的形式出现：a:hover .b{}设置鼠标进入图片时遮罩层的显示效果，如果想平滑进入设置transtion  (这里a标签和img一样)

其次:鼠标离开时遮罩层通常会很生硬的消失，方法在 b元素先设置transtion b{transtion:     }