| Article Introduction: skillfully use CSS3 border to make picture mask effect. |
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Photo Mask Effect webjx.com</title>
<style type= "Text/css" >
. trans {
-webkit-transition:0.3s ease;
-moz-transition:0.3s ease;
-ms-transition:0.3s ease;
-o-transition:0.3s ease;
Transition:0.3s ease;
}
. test_outer {
Display:block;
width:200px;
height:200px;
Margin:1em Auto;
position:relative;
Overflow:hidden;
}
. test_cover {
width:40px;
height:40px;
border:200px solid Rgba (0, 0, 0,. 35);
border-radius:50%;
Position:absolute;
Left: -115px;
Top: -165px;
}
. test_cover:hover {
width:140px;
height:140px;
Left: -170px;
Top: -165px;
}
. test_cover:hover:after {
Content: "Qiu si-sack!" ";
Text-align:center;
margin:55px 0 0 12px;
Color: #fff;
Font:bold 16px/1.2 ' Microsoft Ya-hei ';
text-shadow:1px 1px rgba (0, 0, 0,. 35);
Position:absolute;
}
</style>
<body>
<a href= "#" class= "Test_outer" >
<span class= "Test_cover Trans" ></span>
</a>
</body>
The principle of its implementation is to use a border of the vast translucent border properties (demo in the border width of 200 pixels), border color rgba Black Translucent, and then 50% rounded corners. Then use the positioning to cover it on the picture.
Main Core code:
. test_cover {
width:40px;
height:40px;
border:200px solid Rgba (0, 0, 0,. 35);
border-radius:50%;
Position:absolute;
Left: -115px;
Top: -165px;
}
And then use a parent container outside to hide it.
. test_outer {
Display:block;
width:200px;
height:200px;
Margin:1em Auto;
position:relative;
Overflow:hidden;
}
It's so simple ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
