"
Team:SYSU-China/css/style.css
From 2014.igem.org
| (3 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| - | .ch-item { | + | #section2 .ch-item { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Line 16: | Line 16: | ||
} | } | ||
| - | .ch-img-1 { | + | #section2 .ch-img-1 { |
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/8/86/%E9%A6%96%E9%A1%B53_06.png); |
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| - | .ch-img-2 { | + | #section2 .ch-img-2 { |
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/2/29/%E9%A6%96%E9%A1%B53_07.png); |
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| - | .ch-img-3 { | + | #section2 .ch-img-3 { |
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/f/f0/%E9%A6%96%E9%A1%B53_10.png); |
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| - | .ch-img-4 { | + | #section2 .ch-img-4 { |
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/1/1e/%E9%A6%96%E9%A1%B53_14.png); |
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| - | .ch-img-5 { | + | #section2 .ch-img-5 { |
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/9/99/%E9%A6%96%E9%A1%B53_03.png); |
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| - | .ch-info { | + | #section2 .ch-info { |
position: absolute; | position: absolute; | ||
background: rgba(51,51,51, 0.8); | background: rgba(51,51,51, 0.8); | ||
| Line 65: | Line 65: | ||
} | } | ||
| - | .ch-info h3 { | + | #section2 .ch-info h3 { |
color: #fff; | color: #fff; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
| Line 79: | Line 79: | ||
} | } | ||
| - | .ch-info p { | + | #section2 .ch-info p { |
color: #fff; | color: #fff; | ||
padding: 5px 5px; | padding: 5px 5px; | ||
| Line 94: | Line 94: | ||
} | } | ||
| - | .ch-info p a { | + | #section2 .ch-info p a { |
display: block; | display: block; | ||
color: #fff; | color: #fff; | ||
| Line 107: | Line 107: | ||
} | } | ||
| - | .ch-info p a:hover { | + | #section2 .ch-info p a:hover { |
color: #fff222; | color: #fff222; | ||
color: rgba(255,242,34, 0.8); | color: rgba(255,242,34, 0.8); | ||
} | } | ||
| - | .ch-item:hover { | + | #section2 .ch-item:hover { |
box-shadow: | box-shadow: | ||
inset 0 0 0 1px rgba(255,255,255,0.1), | inset 0 0 0 1px rgba(255,255,255,0.1), | ||
0 1px 2px rgba(0,0,0,0.1); | 0 1px 2px rgba(0,0,0,0.1); | ||
} | } | ||
| - | .ch-item:hover .ch-info { | + | #section2 .ch-item:hover .ch-info { |
-webkit-transform: scale(1); | -webkit-transform: scale(1); | ||
-moz-transform: scale(1); | -moz-transform: scale(1); | ||
| Line 126: | Line 126: | ||
} | } | ||
| - | .ch-item:hover .ch-info p { | + | #section2 .ch-item:hover .ch-info p { |
opacity: 1; | opacity: 1; | ||
} | } | ||
Latest revision as of 02:08, 18 October 2014
- section2 .ch-item {
width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 16px 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; }
- section2 .ch-img-1 {
background-image:url(
);
background-size: 100%;
}
- section2 .ch-img-2 {
background-image:url(
);
background-size: 100%;
}
- section2 .ch-img-3 {
background-image:url(
);
background-size: 100%;
}
- section2 .ch-img-4 {
background-image:url(
);
background-size: 100%;
}
- section2 .ch-img-5 {
background-image:url(
);
background-size: 100%;
}
- section2 .ch-info {
position: absolute; background: rgba(51,51,51, 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;
}
- section2 .ch-info h3 {
color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 0px; padding: 45px 0 0 0; height: 100px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }
- section2 .ch-info p {
color: #fff; padding: 5px 5px; font-style: italic; margin: -25px 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; -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; }
- section2 .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; }
- section2 .ch-info p a:hover {
color: #fff222; color: rgba(255,242,34, 0.8); }
- section2 .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); }
- section2 .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; }
- section2 .ch-item:hover .ch-info p {
opacity: 1; }
