Team:TU-Delft/Zephyr

From 2013.igem.org

(Difference between revisions)
Line 98: Line 98:
<html>
<html>
 +
 +
 +
 +
<html>
 +
    <style type="text/css">
 +
* {margin: 0; padding: 0;}
 +
 +
 +
.slider2{
 +
width: 700px; /*Same as width of the large image*/
 +
position: relative;
 +
/*Instead of height we will use padding*/
 +
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
 +
 +
 +
 +
/*Lets add a shadow*/
 +
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
 +
}
 +
 +
 +
/*Last thing remaining is to add transitions*/
 +
.slider2>img{
 +
position: absolute;
 +
left: 5px; top: 5px;
 +
transition: all 0.5s;
 +
}
 +
 +
.slider2 input[name='slide_switch'] {
 +
display: none;
 +
}
 +
 +
.slider2 label {
 +
/*Lets add some spacing for the thumbnails*/
 +
margin: 10px 0 0 673px;
 +
 +
 +
border: 3px solid #999;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
     
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
 +
}
 +
 +
.slider2 label img{
 +
display: block;
 +
}
 +
 +
/*Time to add the click effects*/
 +
.slider2 input[name='slide_switch']:checked+label {
 +
border-color: #666;
 +
opacity: 1;
 +
}
 +
/*Clicking any thumbnail now should change its opacity(style)*/
 +
/*Time to work on the main images*/
 +
.slider2 input[name='slide_switch'] ~ img {
 +
opacity: 0;
 +
transform: scale(1.1);
 +
}
 +
/*That hides all main images at a 110% size
 +
On click the images will be displayed at normal size to complete the effect
 +
*/
 +
.slider2 input[name='slide_switch']:checked+label+img {
 +
opacity: 1;
 +
transform: scale(1);
 +
}
 +
</style>
 +
</html>
 +
 +
<html>
 +
 +
 +
<div class="slider">
<div class="slider">
 +
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
 +
<label for="id1">
 +
<img src="https://static.igem.org/mediawiki/2013/3/39/Zephyr_part_drawings_Page_01_small.png" width="50px" height="70px"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" width="519px"/>
 +
 +
</div>
 +
 +
<div class="slider2">
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
<label for="id1">
<label for="id1">
Line 116: Line 201:
</div>
</div>
 +
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

Revision as of 08:40, 25 September 2013


Zephyr


Figure 1: The way to Zephyr! Joep in action!

Drawings









































Retrieved from "http://2013.igem.org/Team:TU-Delft/Zephyr"