Template:Team:Bielefeld-Germany/css/frontpage.css
From 2013.igem.org
(Difference between revisions)
m |
|||
(71 intermediate revisions not shown) | |||
Line 12: | Line 12: | ||
text-align: center; | text-align: center; | ||
background:white; | background:white; | ||
- | box-shadow: | + | box-shadow:0px 0px 3px 0px black; |
} | } | ||
Line 25: | Line 25: | ||
.view img { | .view img { | ||
display: block; | display: block; | ||
- | position: | + | position: absolute; |
} | } | ||
.view h2 { | .view h2 { | ||
Line 37: | Line 37: | ||
margin: 10px 0 0 0 | margin: 10px 0 0 0 | ||
} | } | ||
+ | |||
+ | .view h3 { | ||
+ | text-transform: uppercase; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | font-size: 17px; | ||
+ | padding: 10px; | ||
+ | background: rgba(0, 0, 0, 0.3); | ||
+ | margin: 0 0 0 0; | ||
+ | margin-top:0px; | ||
+ | z-index:10; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | .view .hl{ | ||
+ | position:absolute; | ||
+ | margin-top:80px; | ||
+ | z-index:100; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
.view p { | .view p { | ||
font-family: Georgia, serif; | font-family: Georgia, serif; | ||
Line 61: | Line 83: | ||
.view img { | .view img { | ||
+ | transition: all 0.6s linear; | ||
+ | } | ||
+ | .view h3{ | ||
transition: all 0.6s linear; | transition: all 0.6s linear; | ||
} | } | ||
Line 67: | Line 92: | ||
background-color: rgba(255,102,0, 0.8); | background-color: rgba(255,102,0, 0.8); | ||
transition: all 0.6s ease-in-out; | transition: all 0.6s ease-in-out; | ||
- | transform: translateX( | + | transform: translateX(350px); |
+ | -webkit-transform: translateX(350px); | ||
} | } | ||
.view h2 { | .view h2 { | ||
transform: translateY(-100px); | transform: translateY(-100px); | ||
+ | -webkit-transform: translateY(-100px); | ||
opacity: 0; | opacity: 0; | ||
transition: all 0.4s ease-in-out; | transition: all 0.4s ease-in-out; | ||
} | } | ||
+ | } | ||
+ | |||
.view p { | .view p { | ||
transform: translateX(100px); | transform: translateX(100px); | ||
+ | -webkit-transform: translateX(100px); | ||
opacity: 0; | opacity: 0; | ||
transition: all 0.4s linear; | transition: all 0.4s linear; | ||
} | } | ||
.view a.info{ | .view a.info{ | ||
- | transform: | + | transform: translateX(100px); |
+ | -webkit-transform: translateX(100px); | ||
opacity: 0; | opacity: 0; | ||
transition: all 0.2s ease-in-out; | transition: all 0.2s ease-in-out; | ||
Line 89: | Line 120: | ||
.view:hover img { | .view:hover img { | ||
opacity:0.8; | opacity:0.8; | ||
- | |||
transform: translateX(-300px); | transform: translateX(-300px); | ||
+ | -webkit-transform: translateX(-300px); | ||
} | } | ||
+ | |||
+ | .view:hover h3{ | ||
+ | opacity:0.8; | ||
+ | transform: translateX(-300px); | ||
+ | -webkit-transform: translateX(-300px); | ||
+ | } | ||
+ | |||
+ | |||
.view:hover .mask { | .view:hover .mask { | ||
opacity: 1; | opacity: 1; | ||
transform: translateX(000px); | transform: translateX(000px); | ||
+ | -webkit-transform: translateX(000px); | ||
} | } | ||
.view:hover h2, | .view:hover h2, | ||
Line 101: | Line 141: | ||
opacity: 1; | opacity: 1; | ||
transform: translateY(0px); | transform: translateY(0px); | ||
+ | -webkit-transform: translateY(0px); | ||
} | } | ||
+ | |||
+ | .view:hover h3{ | ||
+ | opacity:0; | ||
+ | transform: translateX(-300px); | ||
+ | -webkit-transform: translateX(-300px); | ||
+ | } | ||
+ | |||
+ | |||
.view:hover p { | .view:hover p { | ||
transition-delay: 0.2s; | transition-delay: 0.2s; |
Latest revision as of 17:45, 24 October 2013