Team:Paris Bettencourt/Overview/Results
From 2012.igem.org
(Difference between revisions)
(2 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<!-- ########## Don't edit above ########## --> | <!-- ########## Don't edit above ########## --> | ||
<html> | <html> | ||
- | < | + | <style type="text/css"> |
- | + | ||
+ | .gallerycontainer{ | ||
+ | position: relative; | ||
+ | /*Add a height attribute and set to largest image's height to prevent overlaying*/ | ||
+ | } | ||
- | + | .thumbnail img{ | |
- | + | border: 1px solid white; | |
- | + | margin: 0 5px 5px 0; | |
+ | } | ||
- | + | .thumbnail:hover{ | |
- | + | background-color: transparent; | |
+ | } | ||
+ | .thumbnail:hover img{ | ||
+ | border: 1px solid blue; | ||
+ | } | ||
+ | .thumbnail span{ /*CSS for enlarged image*/ | ||
+ | position: absolute; | ||
+ | background-color: lightyellow; | ||
+ | padding: 5px; | ||
+ | left: -1000px; | ||
+ | border: 1px dashed gray; | ||
+ | visibility: hidden; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .thumbnail span img{ /*CSS for enlarged image*/ | ||
+ | border-width: 0; | ||
+ | padding: 2px; | ||
+ | } | ||
+ | |||
+ | .thumbnail:hover span{ /*CSS for enlarged image*/ | ||
+ | visibility: visible; | ||
+ | top: 0; | ||
+ | left: 230px; /*position where enlarged image should offset horizontally */ | ||
+ | z-index: 50; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="gallerycontainer"> | ||
+ | |||
+ | <a class="thumbnail" href="#thumb"><img src="https://static.igem.org/mediawiki/2012/b/b7/SupD%2BKan*_pur_Cm_Kan.jpg" width="100px" height="66px" border="0" /><span><img src="https://static.igem.org/mediawiki/2012/6/61/RFP_pur_Cm_Kan.png" width="300px" /><br />Simply beautiful.</span></a> | ||
+ | |||
+ | </div> | ||
Latest revision as of 12:48, 25 September 2012