(Created page with ".memRow{ margin-top: 15px; margin-bottom: 15px; margin-left: -15px; margin-right: -15px; min-width: 1200px;...") |
|||
Line 83: | Line 83: | ||
.col-xs-12 .people, .col-xs-12 .peoplebox{ | .col-xs-12 .people, .col-xs-12 .peoplebox{ | ||
width: 25%; | width: 25%; | ||
+ | } | ||
+ | .membericon{ | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | background:url(https://static.igem.org/mediawiki/2018/a/ae/T--Tianjin--member2.png); | ||
+ | position: absolute; | ||
+ | bottom: 4%; | ||
+ | left: 50%; | ||
+ | margin-left: -25px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: 100% 100%; | ||
+ | } | ||
+ | .membericon:hover{ | ||
+ | animation: micon 0.5s ease; | ||
+ | animation-iteration-count: 5; | ||
+ | } | ||
+ | @keyframes micon{ | ||
+ | 0%{bottom: 4%} | ||
+ | 50%{bottom: 0} | ||
+ | 100%{bottom: 4%} | ||
} | } |
Revision as of 14:01, 15 October 2018
.memRow{
margin-top: 15px; margin-bottom: 15px; margin-left: -15px; margin-right: -15px; min-width: 1200px; }
.mid{
margin-left: auto; margin-right: auto; position: relative; float: none; clear: both; padding:0;
} .mid:after {
display: block; content: ' '; clear: both;
} .people{
background-size: 100% 100%; background-repeat: no-repeat; min-height: 300px; max-height: 300px; float: left;
} .peoplebox{
padding: 30px; background: rgba(0,0,0,0.71); color: white; height: 300px; overflow: hidden; text-align: justify; position: absolute; visibility: hidden; display: none;
} .show .peoplebox {
visibility: visible; display: block; /*animation:show .5s ease; -webkit-animation:show .5s ease; animation-iteration-count:1; -webkit-animation-iteration-count:1;*/ top: 0;
} /*@keyframes show{
from{top: 300px;} to{top: 0px;}
}*/ .peoplename{
font-size: 35px; margin: 0; line-height: 0; text-shadow: 0 0 6px black; padding-top: 0px; position: relative; top: 5px;
} .peoplejob{
color: #79acdd; font-size: 20px; line-height: 0; position: relative; top: 12px;
} .peopleword{
position: relative; top: 12px; font-size: 15px; line-height: 1px;
} .col-xs-3 .people, .col-xs-3 .peoplebox{
width: 100%;
} .col-xs-6 .people, .col-xs-6 .peoplebox{
width: 50%;
} .col-xs-9 .people, .col-xs-9 .peoplebox{
width: 33.33%;
} .col-xs-12 .people, .col-xs-12 .peoplebox{
width: 25%;
} .membericon{
width: 50px; height: 50px; background:url(); position: absolute; bottom: 4%; left: 50%; margin-left: -25px; background-repeat: no-repeat; background-size: 100% 100%;
} .membericon:hover{
animation: micon 0.5s ease; animation-iteration-count: 5;
} @keyframes micon{
0%{bottom: 4%} 50%{bottom: 0} 100%{bottom: 4%}
}