|
|
| Line 1: |
Line 1: |
| - | .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;
| |
| - | }
| |
| | | | |
| - | .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%;
| |
| - | }
| |
| - |
| |
| - | .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%;
| |
| - | }
| |
| - |
| |
| - | .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%;
| |
| - | }
| |
| - |
| |
| - | .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%;
| |
| - | }
| |
| - |
| |
| - | .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%;
| |
| - | }
| |
| - |
| |
| - | .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;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .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);
| |
| - | }
| |
| - |
| |
| - | .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;
| |
| - | }
| |
| - |
| |
| - | .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;
| |
| - | }
| |
"
