Difference between revisions of "Team:Austin UTexas LASA/team"
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
