"
Template:CSS/style2
From 2014.igem.org
(Difference between revisions)
| Line 58: | Line 58: | ||
top:0px; | top:0px; | ||
right:0px; | right:0px; | ||
| + | } | ||
| + | |||
| + | .slider{ | ||
| + | /* LAYOUT */ | ||
| + | .container3 { | ||
| + | margin:0 auto; | ||
| + | overflow:hidden; | ||
| + | width:960px; | ||
| + | } | ||
| + | |||
| + | /* CONTENT SLIDER */ | ||
| + | #content-slider { | ||
| + | width:100%; | ||
| + | height:400px; | ||
| + | margin:10px auto 0; | ||
| + | } | ||
| + | /* SLIDER */ | ||
| + | #slider { | ||
| + | background:#000; | ||
| + | border:12px solid #4796ff; | ||
| + | border-radius:24px; | ||
| + | box-shadow:2px 2px 10px rgba(0,0,0,0.7); | ||
| + | height:360px; | ||
| + | width:720px; | ||
| + | margin:40px auto 0; | ||
| + | overflow:hidden; | ||
| + | position:relative; | ||
| + | } | ||
| + | #mask { | ||
| + | overflow:hidden; | ||
| + | height:480px; | ||
| + | } | ||
| + | #slider ul { | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | position:relative; | ||
| + | } | ||
| + | #slider li { | ||
| + | width:720px; | ||
| + | height:540px; | ||
| + | position:absolute; | ||
| + | top:-325px; | ||
| + | list-style:none; | ||
| + | } | ||
| + | |||
| + | #slider li.firstanimation { | ||
| + | -moz-animation:cycle 25s linear infinite; | ||
| + | -webkit-animation:cycle 25s linear infinite; | ||
| + | } | ||
| + | #slider li.secondanimation { | ||
| + | -moz-animation:cycletwo 25s linear infinite; | ||
| + | -webkit-animation:cycletwo 25s linear infinite; | ||
| + | } | ||
| + | #slider li.thirdanimation { | ||
| + | -moz-animation:cyclethree 25s linear infinite; | ||
| + | -webkit-animation:cyclethree 25s linear infinite; | ||
| + | } | ||
| + | #slider li.fourthanimation { | ||
| + | -moz-animation:cyclefour 25s linear infinite; | ||
| + | -webkit-animation:cyclefour 25s linear infinite; | ||
| + | } | ||
| + | #slider li.fifthanimation { | ||
| + | -moz-animation:cyclefive 25s linear infinite; | ||
| + | -webkit-animation:cyclefive 25s linear infinite; | ||
| + | } | ||
| + | |||
| + | #slider .tooltip { | ||
| + | background:rgba(0,0,0,0.7); | ||
| + | width:300px; | ||
| + | height:60px; | ||
| + | position:relative; | ||
| + | bottom:75px; | ||
| + | left:-320px; | ||
| + | -moz-transition:all 1s ease-in-out; | ||
| + | -webkit-transition:all 1s ease-in-out; | ||
| + | } | ||
| + | #slider .tooltip h1 { | ||
| + | color:#fff; | ||
| + | font-size:24px; | ||
| + | font-weight:300; | ||
| + | line-height:30px; | ||
| + | padding:0 0 0 0px; | ||
| + | } | ||
| + | #slider li#first:hover .tooltip, | ||
| + | #slider li#second:hover .tooltip, | ||
| + | #slider li#third:hover .tooltip, | ||
| + | #slider li#fourth:hover .tooltip, | ||
| + | #slider li#fifth:hover .tooltip { | ||
| + | left:0px; | ||
| + | } | ||
| + | |||
} | } | ||
.link_bg{ | .link_bg{ | ||
Revision as of 18:25, 12 September 2014
