Line 16: | Line 16: | ||
text-align: center !important; | text-align: center !important; | ||
} | } | ||
+ | |||
+ | /*Time for the CSS*/ | ||
+ | * {margin: 0; padding: 0;} | ||
+ | |||
+ | .slider{ | ||
+ | width: 900px; /*Same as width of the large image*/ | ||
+ | position: relative; | ||
+ | /*Instead of height we will use padding*/ | ||
+ | padding-top: 600px; /*That helps bring the labels down*/ | ||
+ | |||
+ | /*Lets add a shadow*/ | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Last thing remaining is to add transitions*/ | ||
+ | .slider>img{ | ||
+ | position: absolute; | ||
+ | left: 0; top: 0; | ||
+ | transition: all 0.5s; | ||
+ | } | ||
+ | |||
+ | .slider input[name='slide_switch'] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .slider label { | ||
+ | /*Lets add some spacing for the thumbnails*/ | ||
+ | margin: 30px 0 0 18px; | ||
+ | |||
+ | float: left; | ||
+ | cursor: pointer; | ||
+ | transition: all 0.5s; | ||
+ | |||
+ | /*Default style = low opacity*/ | ||
+ | opacity: 0.6; | ||
+ | |||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | .slider label img{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /*Time to add the click effects*/ | ||
+ | .slider 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*/ | ||
+ | .slider 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 | ||
+ | */ | ||
+ | .slider input[name='slide_switch']:checked+label+img { | ||
+ | opacity: 1; | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | /*Clicking on any thumbnail now should activate the image related to it*/ | ||
+ | |||
+ | /*We are done :)*/ | ||
</style> | </style> | ||
</head></html> | </head></html> | ||
Line 120: | Line 184: | ||
</td> | </td> | ||
</tr> | </tr> | ||
− | |||
<tr> | <tr> | ||
Line 138: | Line 201: | ||
<td align=center valign=center colspan=1></td> | <td align=center valign=center colspan=1></td> | ||
<td align=center valign=center colspan=2> | <td align=center valign=center colspan=2> | ||
− | <h3>Nominated for Best Composite Part</h3> | + | <h3 style="margin-bottom: 50px">Nominated for Best Composite Part</h3> |
</td> | </td> | ||
<td align=center valign=center colspan=2> | <td align=center valign=center colspan=2> | ||
− | <h3>Nominated for Best Part Collection</h3> | + | <h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3> |
</td> | </td> | ||
<td align=center valign=center colspan=1></td> | <td align=center valign=center colspan=1></td> | ||
+ | </tr> | ||
+ | |||
+ | <tr><td colspan=6 align=middle valign=center> | ||
+ | <font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Gallery</b></font> | ||
+ | </td></tr> | ||
+ | |||
+ | <tr> <td colspan=6 align=middle valing=center> | ||
+ | <!-- | ||
+ | We will make a slider with stylized thumbnails using CSS3 | ||
+ | The markup is very simple: | ||
+ | Radio Inputs | ||
+ | Labels with thumbnails to detect click event | ||
+ | Main Image | ||
+ | --> | ||
+ | <div class="slider"> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id3" checked="checked"/> | ||
+ | <label for="id3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--Munich--Review2017_19.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--Munich--Review2017_19.jpeg" width=900/> | ||
+ | <!--Lets show the second image by default on page load--> | ||
+ | <input type="radio" name="slide_switch" id="id2" /> | ||
+ | <label for="id2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id1"/> | ||
+ | <label for="id1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/> | ||
+ | |||
+ | |||
+ | <input type="radio" name="slide_switch" id="id4"/> | ||
+ | <label for="id4"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id5"/> | ||
+ | <label for="id5"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id6"/> | ||
+ | <label for="id6"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width="100"/> | ||
+ | </label> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/> | ||
+ | <input type="radio" name="slide_switch" id="id7"/> | ||
+ | <label for="id7"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width=900/> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td colspan=6> | ||
+ | <h3> <a style="color: #51a7f9 !important" href="/Team:Munich/Gallery">See the rest of our gallery...</a></h3> | ||
+ | </td> | ||
</tr> | </tr> | ||
Revision as of 22:48, 14 December 2017
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|