Anikasingh (Talk | contribs) |
Anikasingh (Talk | contribs) |
||
Line 4: | Line 4: | ||
<br> | <br> | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.column { | .column { | ||
float: left; | float: left; | ||
Line 16: | Line 10: | ||
margin-bottom: 16px; | margin-bottom: 16px; | ||
padding: 0 8px; | padding: 0 8px; | ||
+ | position: relative; | ||
} | } | ||
Line 42: | Line 37: | ||
color: grey; | color: grey; | ||
} | } | ||
+ | |||
+ | .overlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | transition: .5s ease; | ||
+ | background-color: #008CBA; | ||
+ | } | ||
+ | |||
+ | .column:hover .overlay { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .text { | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | position: relative; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
+ | |||
<div class="container"> | <div class="container"> | ||
Line 57: | Line 82: | ||
<div class="column"> | <div class="column"> | ||
<div class="card"> | <div class="card"> | ||
− | <img | + | <img src="https://static.igem.org/mediawiki/2017/a/a2/T-Austin_UTexas_LASA--Anika.jpg" style="width:100%"> |
<div class="container"> | <div class="container"> | ||
<h2>Person</h2> | <h2>Person</h2> | ||
Line 65: | Line 90: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <div class="overlay"> | ||
+ | <div class="text">Hello World</div> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
Revision as of 17:55, 6 October 2017
Our Team
Team Members
Person
Title
Some text that describes
example@example.com
Person
Title
Some text that describes
example@example.com
Person
Title
Some text that describes
example@example.com
Person
Title
Some text that describes
example@example.com