Difference between revisions of "Team:Vilnius-Lithuania/test"
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | . | + | .boxgridBig, .boxgridMedium { |
− | + | height: 200px; | |
− | + | } | |
− | + | .boxgridBig { | |
− | + | width: 241px; | |
− | + | float: left; | |
− | + | } | |
− | + | .boxgridMedium { | |
− | + | width: 298px; | |
− | + | float: left; | |
− | + | } | |
− | + | .boxgrid { | |
− | + | overflow: hidden; | |
− | + | position: relative; | |
− | + | } | |
− | + | ||
− | } | + | |
− | . | + | .boxgrid img{ |
− | + | position: absolute; | |
− | + | top: 0; | |
− | + | left: 0; | |
− | + | border: 0; | |
− | } | + | } |
− | . | + | .boxcaption{ |
− | + | float: left; | |
− | + | position: absolute; | |
− | + | background: #000; | |
− | + | width: 100%; | |
− | + | opacity: .8; | |
− | + | padding: 10px; | |
− | + | /* For IE 5-7 */ | |
− | + | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); | |
− | } | + | /* For IE 8 */ |
+ | -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | ||
+ | } | ||
+ | .boxcaption:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
− | . | + | h2.onBlack { |
− | + | color:white; | |
− | + | margin-top: -5px; | |
− | + | border: none; | |
− | + | Font-size: 26px; | |
− | + | padding-bottom: 0px; | |
− | } | + | line-height:1em; |
+ | } | ||
+ | p.onBlack { | ||
+ | color:white; | ||
+ | margin-right:18px; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | p.onBlackIntro { | ||
+ | font-size:17px; | ||
+ | font-style: italic; | ||
+ | color:white; | ||
+ | margin-right:10px; | ||
+ | margin-bottom:10px; | ||
+ | } | ||
</style> | </style> | ||
− | + | <script src="https://2013.igem.org/Team:SDU-Denmark/core/jquerytools?action=raw&ctype=text/javascript" type="text/javascript" ></script> | |
− | + | </html> | |
− | + | ||
− | + | <html> | |
− | + | <script type="text/javascript"> | |
− | + | $(document).ready(function() { | |
− | + | $('#box1').hover(function(){ | |
− | + | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; | |
− | + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | |
− | + | }, function() { | |
− | + | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); | |
− | + | }); | |
− | </ | + | $('#box2').hover(function(){ |
+ | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | $('#box3').hover(function(){ | ||
+ | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | $('#box4').hover(function(){ | ||
+ | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <div class="boxgrid boxgridBig" id="box1" style="margin-right: 10px;"> | ||
+ | <img src="" width="242" height="200" style="background-color: #784136;"> | ||
+ | <div class="cover boxcaption" style="top: 160px"> | ||
+ | <h2 class="onBlack">Title</h2> | ||
+ | <p class="onBlackIntro"></p> | ||
+ | <p class="onBlack">Learn more...</p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | ||
</html> | </html> |
Revision as of 14:52, 24 July 2015
Title
Learn more...