CSS3 Unfold Mask

Source: Internet
Author: User

Sets the matte layer (. ch-info) opacity:0 (opacity is the opacity level of the set Div, which is hidden when 0), and the mouse passes through. Ch-item. The Ch-info parameter for opacity is 1,.ch-item:hover. Ch-info {opacity:1}, also set scale (1) (scaled is a multiple of magnification, 1 is 1 time times, if set to 10, then. Ch-item will be magnified 10 times times)

<! 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> Untitled Document </title>
<style>

. huisuo-warp{margin:0 Auto; width:100%; height:auto;}
. youshi{width:1080px; height:650px;margin:0 Auto;}
. youshi-title{font-size:30px; letter-spacing:2px; color: #333; padding:30px 0 0;}
. Youshi-title p{margin-top:10px;}

. ch-grid {
margin:20px 0 0 0;
padding:0;
List-style:none;
Display:block;
Text-align:center;
width:100%;
}

. Ch-grid:after,
. ch-item:before {
Content: ";
display:table;
}

. ch-grid:after {
Clear:both;
}

. Ch-grid Li {
width:200px;
height:200px;
Display:inline-block;
margin:30px;
}
. ch-item {
width:100%;
height:100%;
border-radius:50%;
position:relative;
Cursor:default;
Box-shadow:
Inset 0 0 0 5px rgba (255,255,255,0.6),
0 1px 2px Rgba (0,0,0,0.1);

-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
Transition:all 0.4s ease-in-out;
}

. ch-img-1 {
Background-color: #E78C57;
}

. ch-img-2 {
Background-color: #EFC531;
}

. ch-img-3 {
Background-color: #41CEC8;
}
. ch-img-4 {
Background-color: #78CB3D;
}
. ch-img-5 {
Background-color: #41CEC8;
}
. ch-img-6 {
Background-color: #EFC531;
}
. ch-img-7 {
Background-color: #78CB3D;
}
. ch-img-8 {
Background-color: #E78C57;
}
. ch-info {
Position:absolute;
Background:rgba (63,147,147, 0.8);
Width:inherit;
Height:inherit;
border-radius:50%;
opacity:0;

-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
Transition:all 0.4s ease-in-out;

-webkit-transform:scale (0);
-moz-transform:scale (0);
-o-transform:scale (0);
-ms-transform:scale (0);
Transform:scale (0);

-webkit-backface-visibility:hidden;

}

. ch-info H3 {
Color: #fff;
Text-transform:uppercase;
letter-spacing:2px;
font-size:22px;
Margin:0 30px;
padding:45px 0 0 0;
height:100px;

Text-shadow:
0 0 1px #fff,
0 1px 2px Rgba (0,0,0,0.3);
}

. ch-info P {
Font-family: "Microsoft Jas Black";
Color: #fff;
font-size:14px;
PADDING:1PX 5px;
margin:40px 25px 10px 28px;
font-size:15px;
letter-spacing:2px;
line-height:20px;
Text-align:left;
Opacity:1;
-webkit-transition:all 1s ease-in-out 0.4s;
-moz-transition:all 1s ease-in-out 0.4s;
-o-transition:all 1s ease-in-out 0.4s;
-ms-transition:all 1s ease-in-out 0.4s;
Transition:all 1s ease-in-out 0.4s;
}

. Ch-info p a {
Display:block;
Color: #fff;
Color:rgba (255,255,255,0.7);
Font-style:normal;
font-weight:700;
Text-transform:uppercase;
font-size:9px;
letter-spacing:1px;
padding-top:4px;
font-family: ' Open Sans ', Arial, Sans-serif;
}

. ch-info P A:hover {
Color: #fff222;
Color:rgba (255,242,34, 0.8);
}

. ch-item:hover {
Box-shadow:
Inset 0 0 0 1px rgba (255,255,255,0.1),
0 1px 2px Rgba (0,0,0,0.1);
}
. ch-item:hover. Ch-info {
-webkit-transform:scale (1);
-moz-transform:scale (1);
-o-transform:scale (1);
-ms-transform:scale (1);
Transform:scale (1);
Opacity:1;
}

. ch-item:hover. ch-info p {
Opacity:1;
}

</style>

<body>
<article class= "Youshi" >
<div class= "Youshi-title" style= "margin:0 auto; Text-align:center; " > Product Core Advantage <p></p>
</div>

<ul class= "Ch-grid" >
<li>
<div class= "Ch-item ch-img-1" >
<div class= "Ch-info" >
<p> clearing automatic printing, currency statistics, various types of documents can be easily queried, clear retention of operating traces, to help managers monitor the cashier </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-2" >
<div class= "Ch-info" >
<p> member card information at a glance; documents are automatically updated without manual document transfer and calculation; Consumption list consumption is clearly </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-3" >
<div class= "Ch-info" >
<p> help cashier and cashier to check quickly without error, check check and financial management conveniently, and understand the consumption of members according to time period </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-4" >
<div class= "Ch-info" >
<p> convenient to the member's personalized service, support all kinds of membership cards, support member storage value, member price, member discount, Loyalty points management </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-5" >
<div class= "Ch-info" >
<p> real-time monitoring of the business situation in the premises, giving the sales statistics of consumer goods, and making statistics on the consumption of members during the period of time; Business statement. </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-6" >
<div class= "Ch-info" >
<p> Inventory documents all the computer save, clear, convenient query, inventory ledger, inventory statistics, procurement details of the detailed </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-7" >
<div class= "Ch-info" >
<p> chain member accounts can be synchronized at any time, business data uploaded on time, members can be in each chain store consumption, mobile Smart query simple, practical. </p>
</div>
</div>
</li>
<li>
<div class= "Ch-item ch-img-8" >
<div class= "Ch-info" >
<p> full-Featured, the most professional management software, in the country has nearly 20 core agents, customers all over the country, by a large number of users alike. </p>
</div>
</div>
</li>

</ul>

</article>

</body>

CSS3 Unfold Mask

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.