Line 9: | Line 9: | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
− | + | <head> | |
+ | <style type="text/css"> | ||
− | . | + | .image { |
− | + | position:absolute; | |
− | + | left: 24%; | |
− | + | top: 27%; | |
− | + | width:330px; | |
− | + | height:330px; | |
} | } | ||
+ | .image img { | ||
+ | width:100%; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | .image:after { | ||
+ | content:'Here is some text..'; | ||
+ | color:#fff; | ||
+ | position:absolute; | ||
+ | width:100%; height:100%; | ||
+ | top:0; left:0; | ||
+ | background:rgba(0,0,0,0.6); | ||
+ | opacity:0; | ||
+ | transition: all 0.5s; | ||
+ | -webkit-transition: all 0.5s; | ||
+ | } | ||
+ | .image:hover:after { | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | .image2 { | ||
+ | position:absolute; | ||
+ | left: 50%; | ||
+ | top: 27%; | ||
+ | width:330px; | ||
+ | height:330px; | ||
+ | } | ||
+ | .image2 img { | ||
+ | width:100%; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | .image2:after { | ||
+ | content:'Here is some text..'; | ||
+ | color:#fff; | ||
+ | position:absolute; | ||
+ | width:100%; height:100%; | ||
+ | top:0; left:0; | ||
+ | background:rgba(0,0,0,0.6); | ||
+ | opacity:0; | ||
+ | transition: all 0.5s; | ||
+ | -webkit-transition: all 0.5s; | ||
+ | } | ||
+ | .image2:hover:after { | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .image3 { | ||
+ | position:absolute; | ||
+ | left: 24%; | ||
+ | top: 37%; | ||
+ | width:330px; | ||
+ | height:330px; | ||
+ | } | ||
+ | .image3 img { | ||
+ | width:100%; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | .image3:after { | ||
+ | content:'Here is some text..'; | ||
+ | color:#fff; | ||
+ | position:absolute; | ||
+ | width:100%; height:100%; | ||
+ | top:0; left:0; | ||
+ | background:rgba(0,0,0,0.6); | ||
+ | opacity:0; | ||
+ | transition: all 0.5s; | ||
+ | -webkit-transition: all 0.5s; | ||
+ | } | ||
+ | .image3:hover:after { | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .image4 { | ||
+ | position:absolute; | ||
+ | left: 50%; | ||
+ | top: 37%; | ||
+ | width:330px; | ||
+ | height:330px; | ||
+ | } | ||
+ | .image4 img { | ||
+ | width:100%; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | .image4:after { | ||
+ | content:'Here is some text..'; | ||
+ | color:#fff; | ||
+ | position:absolute; | ||
+ | width:100%; height:100%; | ||
+ | top:0; left:0; | ||
+ | background:rgba(0,0,0,0.6); | ||
+ | opacity:0; | ||
+ | transition: all 0.5s; | ||
+ | -webkit-transition: all 0.5s; | ||
+ | } | ||
+ | .image4:hover:after { | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | </head> | ||
<!----Standard Outreach Stuff----> | <!----Standard Outreach Stuff----> | ||
Line 90: | Line 194: | ||
− | <div class=" | + | <!------4 boxes-------> |
− | + | ||
− | + | <div class="image"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/f/fa/T--William_and_Mary--speedlogo8.jpeg" alt="" /> | |
</div> | </div> | ||
+ | <div class="image2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/fa/T--William_and_Mary--speedlogo8.jpeg" alt="" /> | ||
+ | </div> | ||
+ | <div class="image3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/fa/T--William_and_Mary--speedlogo8.jpeg" alt="" /> | ||
+ | </div> | ||
+ | |||
+ | <div class="image4"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/fa/T--William_and_Mary--speedlogo8.jpeg" alt="" /> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
+ | |||
+ | <br> | ||
+ | </br> | ||
<br> | <br> |
Revision as of 05:02, 8 October 2017
Outreach