Difference between revisions of "Team:UCSC/Project"
Evan pepper (Talk | contribs) |
Evan pepper (Talk | contribs) |
||
| Line 19: | Line 19: | ||
} | } | ||
| − | .proj-button { | + | /* .proj-button { |
opacity: 0.6; | opacity: 0.6; | ||
} | } | ||
| Line 34: | Line 34: | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
| + | |||
| + | */ | ||
| + | |||
| + | |||
| + | .proj-button { | ||
| + | position: relative; | ||
| + | width: 50%; | ||
| + | } | ||
| + | |||
| + | .proj-button-image { | ||
| + | opacity: 1; | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | transition: .5s ease; | ||
| + | backface-visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .proj-button-desc { | ||
| + | transition: .5s ease; | ||
| + | opacity: 0; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | -ms-transform: translate(-50%, -50%) | ||
| + | } | ||
| + | |||
| + | .proj-button:hover .proj-button-image { | ||
| + | opacity: 0.3; | ||
| + | } | ||
| + | |||
| + | .proj-button:hover .proj-button-desc { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .text { | ||
| + | background-color: #4CAF50; | ||
| + | color: white; | ||
| + | font-size: 16px; | ||
| + | padding: 16px 32px; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
| + | |||
| + | |||
| + | <div class="container"> | ||
| + | <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%"> | ||
| + | <div class="middle"> | ||
| + | <div class="text">John Doe</div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
<body> | <body> | ||
| Line 53: | Line 108: | ||
<div class="row"> | <div class="row"> | ||
| + | <div class="proj-button"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/7/74/Ace_icon.png" class="proj-button-image" style="width:100%"> | ||
| + | <div class="proj-button-desc"> | ||
| + | <div class="text">Acetaminophen</div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <!-- | ||
<a href="https://2017.igem.org/Team:UCSC/Acetaminophen" class="proj-button"> | <a href="https://2017.igem.org/Team:UCSC/Acetaminophen" class="proj-button"> | ||
<img src="https://static.igem.org/mediawiki/2017/7/74/Ace_icon.png"> | <img src="https://static.igem.org/mediawiki/2017/7/74/Ace_icon.png"> | ||
<div class="proj-button-desc"> | <div class="proj-button-desc"> | ||
| − | |||
</div> | </div> | ||
</a> | </a> | ||
| Line 75: | Line 137: | ||
<img src="https://static.igem.org/mediawiki/2017/e/e6/Results_icon.png"> | <img src="https://static.igem.org/mediawiki/2017/e/e6/Results_icon.png"> | ||
</a> | </a> | ||
| − | + | --> | |
</div> | </div> | ||
Revision as of 00:18, 26 August 2017
John Doe
Click on an icon below to learn more about our project!
