Team:Potsdam Bioware/slider

From 2012.igem.org

(Difference between revisions)
Line 8: Line 8:
margin: 0px auto;
margin: 0px auto;
width: 845px;
width: 845px;
-
height: 200px;
+
height: 400px;
position: relative;
position: relative;
overflow: hidden;
overflow: hidden;
background: #434343;
background: #434343;
-
}
 
-
 
-
#slider [id^='image']:target img {
 
-
top: 0; 
 
-
left: 0;
 
}
}
Line 24: Line 19:
width: 10px;
width: 10px;
height: 10px;
height: 10px;
-
}
 
-
 
-
#slider [id^="image"] img {
 
-
position: absolute;
 
-
top: -200px;
 
-
border: 0;
 
-
-moz-transition: top 0.5s ease-in;
 
-
-ms-transition: top 0.5s ease-in;
 
-
-webkit-transition: top 0.5s ease-in;
 
-
-o-transition: top 0.5s ease-in;
 
}
}
#slider [id^="image"] div{
#slider [id^="image"] div{
position: absolute;
position: absolute;
-
top: -200px;
+
top: -800px;
border: 0;
border: 0;
-moz-transition: top 0.5s ease-in;
-moz-transition: top 0.5s ease-in;
Line 63: Line 48:
#image-1 .slider-nav {
#image-1 .slider-nav {
-
right: 80px;
+
right: 100px;
}
}
#image-2 .slider-nav {
#image-2 .slider-nav {
-
right: 60px;
+
right: 80px;
}
}
#image-3 .slider-nav {
#image-3 .slider-nav {
-
right: 40px;
+
right: 60px;
}
}
#image-4 .slider-nav {
#image-4 .slider-nav {
-
right: 20px;
+
right: 40px;
}
}
#image-5 .slider-nav {
#image-5 .slider-nav {
-
right: 100px;
+
right: 20px;
}
}
Line 90: Line 75:
<div id="image-1">
<div id="image-1">
-
<div></div>
+
<div>
 +
                <img src="https://static.igem.org/mediawiki/2012/6/60/Animation2.jpg" />
 +
                </div>
<a class="slider-nav" href="#image-1"></a>
<a class="slider-nav" href="#image-1"></a>
</div>
</div>

Revision as of 17:25, 22 September 2012

Retrieved from "http://2012.igem.org/Team:Potsdam_Bioware/slider"