Difference between revisions of "Team:Tianjin/css/member"

Line 103: Line 103:
 
     50%{bottom: 0}
 
     50%{bottom: 0}
 
     100%{bottom: 4%}
 
     100%{bottom: 4%}
 +
}
 +
@media(max-width: 767px){
 +
    .peoplebox{
 +
        position: relative;
 +
    }
 +
    .people{
 +
        width: 100% !important;
 +
    }
 +
    .memRow{
 +
        min-width: 0;
 +
        margin-top: 0;
 +
        margin-bottom: 0;
 +
    }
 
}
 
}

Revision as of 11:55, 17 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(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%}

} @media(max-width: 767px){ 

   .peoplebox{
       position: relative;
   }
   .people{
       width: 100% !important;
   }
   .memRow{
       min-width: 0;
       margin-top: 0;
       margin-bottom: 0;
   }

}