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