Difference between revisions of "Team:NAIT Edmonton/Trial11"

Line 9: Line 9:
  
 
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/Modernizer.js?action=raw&amp;ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/Modernizer.js?action=raw&amp;ctype=text/javascript"></script>
−
<link href="https://2015.igem.org/Team:NAIT_Edmonton/IA" rel="stylesheet" type="text/css">
 
−
 
  
 
</head>
 
</head>
Line 192: Line 190:
 
<h3>Room G205</h3>
 
<h3>Room G205</h3>
 
        
 
        
 +
 +
 +
<style type="text/css">
 +
 +
.ia-container {
 +
width: 685px;
 +
margin: 20px auto;
 +
overflow: hidden;
 +
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
 +
border: 7px solid rgba(255,255,255,0.6);
 +
}
 +
 +
.ia-container figure {
 +
    position: absolute;
 +
top: 0;
 +
left: 50px; /* width of visible piece */
 +
width: 335px;
 +
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
 +
-webkit-transition: all 0.3s ease-in-out;
 +
    -moz-transition: all 0.3s ease-in-out;
 +
    -o-transition: all 0.3s ease-in-out;
 +
    -ms-transition: all 0.3s ease-in-out;
 +
    transition: all 0.3s ease-in-out;
 +
}
 +
 +
.ia-container > figure {
 +
    position: relative;
 +
left: 0 !important;
 +
}
 +
 +
.ia-container img {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.ia-container input {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 50px; /* just cover visible part */
 +
height: 100%;
 +
cursor: pointer;
 +
border: 0;
 +
padding: 0;
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
    filter: alpha(opacity=0);
 +
    opacity: 0;
 +
z-index: 100;
 +
-webkit-appearance: none;
 +
-moz-appearance: none;
 +
appearance: none;
 +
}
 +
.ia-container input:checked{
 +
width: 5px;
 +
left: auto;
 +
right: 0px;
 +
}
 +
.ia-container input:checked ~ figure {
 +
-webkit-transition: all 0.7s ease-in-out;
 +
    -moz-transition: all 0.7s ease-in-out;
 +
    -o-transition: all 0.7s ease-in-out;
 +
    -ms-transition: all 0.7s ease-in-out;
 +
    transition: all 0.7s ease-in-out;
 +
left: 335px;
 +
}
 +
 +
.ia-container figcaption {
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(87, 73, 81, 0.1);
 +
position: absolute;
 +
top: 0px;
 +
-webkit-transition: all 0.2s linear;
 +
    -moz-transition: all 0.2s linear;
 +
    -o-transition: all 0.2s linear;
 +
    -ms-transition: all 0.2s linear;
 +
    transition: all 0.2s linear;
 +
}
 +
 +
.ia-container figcaption span {
 +
position: absolute;
 +
top: 40%;
 +
margin-top: -30px;
 +
right: 20px;
 +
left: 20px;
 +
overflow: hidden;
 +
text-align: center;
 +
background: rgba(87, 73, 81, 0.3);
 +
line-height: 20px;
 +
font-size: 18px;
 +
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
    filter: alpha(opacity=0);
 +
    opacity: 0;
 +
text-transform: uppercase;
 +
letter-spacing: 4px;
 +
font-weight: 700;
 +
padding: 20px;
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
 +
.ia-container input:checked + figcaption,
 +
.ia-container input:checked:hover + figcaption{
 +
background: rgba(87, 73, 81, 0);
 +
}
 +
 +
.ia-container input:checked + figcaption span {
 +
-webkit-transition: all 0.4s ease-in-out 0.5s;
 +
    -moz-transition: all 0.4s ease-in-out 0.5s;
 +
    -o-transition: all 0.4s ease-in-out 0.5s;
 +
    -ms-transition: all 0.4s ease-in-out 0.5s;
 +
    transition: all 0.4s ease-in-out 0.5s;
 +
 +
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
 +
    filter: alpha(opacity=99);
 +
opacity: 1;
 +
 +
top: 50%;
 +
}
 +
 +
.ia-container #ia-selector-last:checked + figcaption span {
 +
-webkit-transition-delay: 0.3s;
 +
-moz-transition-delay: 0.3s;
 +
-o-transition-delay: 0.3s;
 +
-ms-transition-delay: 0.3s;
 +
transition-delay: 0.3s;
 +
}
 +
 +
.ia-container input:hover + figcaption {
 +
background: rgba(87, 73, 81, 0.03);
 +
}
 +
 +
.ia-container input:checked ~ figure input{
 +
    z-index: 1;
 +
}
 +
 +
@media screen and (max-width: 720px) {
 +
    .ia-container {
 +
width: 540px;
 +
}
 +
 +
.ia-container figure {
 +
left: 40px;
 +
width: 260px;
 +
}
 +
 +
.ia-container input {
 +
width: 40px;
 +
}
 +
 +
.ia-container input:checked ~ figure {
 +
left: 260px;
 +
}
 +
 +
.ia-container figcaption span {
 +
font-size: 16px;
 +
}
 +
}
 +
 +
@media screen and (max-width: 520px) {
 +
    .ia-container {
 +
width: 320px;
 +
}
 +
 +
.ia-container figure {
 +
left: 20px;
 +
width: 180px;
 +
}
 +
 +
.ia-container input {
 +
width: 20px;
 +
}
 +
 +
.ia-container input:checked ~ figure {
 +
left: 180px;
 +
}
 +
 +
.ia-container figcaption span {
 +
font-size: 12px;
 +
letter-spacing: 2px;
 +
padding: 10px;
 +
margin-top: -20px;
 +
}
 +
 +
}
 +
 +
 +
</style>
 
  
 
  
  

Revision as of 01:04, 31 July 2015