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