Team:SYSU-China/css/style.css

From 2014.igem.org

(Difference between revisions)
(Blanked the page)
 
Line 1: Line 1:
 +
#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(https://static.igem.org/mediawiki/2014/8/86/%E9%A6%96%E9%A1%B53_06.png);
 +
background-size: 100%;
 +
}
 +
 +
#section2 .ch-img-2 {
 +
background-image:url(https://static.igem.org/mediawiki/2014/2/29/%E9%A6%96%E9%A1%B53_07.png);
 +
background-size: 100%;
 +
}
 +
 +
#section2 .ch-img-3 {
 +
background-image:url(https://static.igem.org/mediawiki/2014/f/f0/%E9%A6%96%E9%A1%B53_10.png);
 +
background-size: 100%;
 +
}
 +
 +
#section2 .ch-img-4 {
 +
background-image:url(https://static.igem.org/mediawiki/2014/1/1e/%E9%A6%96%E9%A1%B53_14.png);
 +
background-size: 100%;
 +
}
 +
 +
#section2 .ch-img-5 {
 +
background-image:url(https://static.igem.org/mediawiki/2014/9/99/%E9%A6%96%E9%A1%B53_03.png);
 +
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;
 +
}

Latest revision as of 02:08, 18 October 2014

  1. 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; }

  1. section2 .ch-img-1 {

background-image:url(%E9%A6%96%E9%A1%B53_06.png); background-size: 100%; }

  1. section2 .ch-img-2 {

background-image:url(%E9%A6%96%E9%A1%B53_07.png); background-size: 100%; }

  1. section2 .ch-img-3 {

background-image:url(%E9%A6%96%E9%A1%B53_10.png); background-size: 100%; }

  1. section2 .ch-img-4 {

background-image:url(%E9%A6%96%E9%A1%B53_14.png); background-size: 100%; }

  1. section2 .ch-img-5 {

background-image:url(%E9%A6%96%E9%A1%B53_03.png); background-size: 100%; }

  1. 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;

}

  1. 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); }

  1. 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; }

  1. 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; }

  1. section2 .ch-info p a:hover {

color: #fff222; color: rgba(255,242,34, 0.8); }

  1. 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); }

  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; }

  1. section2 .ch-item:hover .ch-info p {

opacity: 1; }

Retrieved from "http://2014.igem.org/Team:SYSU-China/css/style.css"