}
.second-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity:1;
transform:scale(1,1);
transition-delay:0.3s;
}
3 Example 
HTML
这里在view类的基础上添加third-effect类.
<div class=”view third-effect”>
<img src=”images/3.jpg” />
<div class=”mask”>
<a href=”#” class=”info” title=”Full Image”>Full Image</a>
</div>
</div>
CSS
使用边框属性只需要简单的几行代码就能得到非常棒的效果.
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.third-effect a.info {
position:relative;
top:-10px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}
4 Example 
HTML
在此示例中的代码是比之前的明显减少，但做出来的悬停效果将是非常令人印象深刻的.
1 <div class="view fourth-effect">
2 <a href="#" title="Full Image"><img src="images/4.jpg" /></a>
3 <div class="mask"></div>
4 </div>
CSS
仅使用mask类与border-radius属性结合打造出一个美丽的悬停效果，单击图片实现图片的可见性
.fourth-effect .mask {
position:absolute; /* Center the mask */
top:50px;
left:100px;
cursor:pointer;
border-radius: 50px;
border-width: 50px;
display: inline-block;
height: 100px;
width: 100px;
border: 50px solid rgba(0, 0, 0, 0.7);
box-sizing:border-box;
opacity:1;
visibility:visible;
transform:scale(4);
transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
opacity: 0;
border:0px solid rgba(0,0,0,0.7);
visibility:hidden;
}
5 Example 
