Difference between revisions of "Team:ETH Zurich/homeStyleCss"

 
(23 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<style>
 
<style>
 
#mainContainer,#footerContainer {
 
#mainContainer,#footerContainer {
−
     overflow-x: hidden;
+
     overflow: hidden;
 
     width:80%;
 
     width:80%;
 
     max-width:1090px;
 
     max-width:1090px;
Line 182: Line 182:
 
     display:inherit;
 
     display:inherit;
 
}
 
}
−
#homeMainContainer img {
+
 
−
     transition: width 1s,transform 1s,opacity 1s;
+
#homepageImageContainer {
−
     opacity:1;
+
     height:80%;
 +
     position:relative;
 
}
 
}
 
#homeMainCaption {
 
#homeMainCaption {
 
     background: rgba(0,0,0,0.7);
 
     background: rgba(0,0,0,0.7);
−
     height:0;
+
     height:20%;
−
    transition: height 0.2s;
+
/*    transition: height 0.2s;
 
     position:absolute;
 
     position:absolute;
 
     left:0;
 
     left:0;
 
     right:0;
 
     right:0;
−
     bottom:0;
+
     bottom:0;*/
 
}
 
}
−
#homeMainCaption p {
+
#homeMainCaption h3 {
 
     color:white;
 
     color:white;
 
     padding:5%;
 
     padding:5%;
Line 216: Line 217:
 
     opacity:1;
 
     opacity:1;
 
}*/
 
}*/
−
#homeMainContainer:hover #homeMainCaption {
+
/*
−
    height:20%;
+
−
}
+
 
#homeMainContainer img {
 
#homeMainContainer img {
 
     height:auto;
 
     height:auto;
−
}
+
    width:80%;
 +
    position:absolute !important;
 +
    top:50%;
 +
    left:50%;
 +
    -webkit-transform:translateY(-50%) translateX(-50%);
 +
      -moz-transform:translateY(-50%) translateX(-50%);
 +
        -o-transform:translateY(-50%) translateX(-50%);
 +
            transform:translateY(-50%) translateX(-50%);
 +
 
 +
 
 +
}*/
 
#homeMainContainer a {
 
#homeMainContainer a {
 
     color:#006EB4;
 
     color:#006EB4;
Line 232: Line 241:
 
</style>
 
</style>
  
−
<style id="mainState0">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-60%,-55%,0);
 
−
    width:80%;
 
−
}
 
−
</style>
 
−
<style id="mainState1">
 
−
#homeMainContainer img {
 
−
    width:5000%;
 
−
    opacity:0;
 
−
}
 
−
</style>
 
−
<style id="mainState2">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-50%,0,0);
 
−
    width:100%;
 
−
}
 
−
</style>
 
−
<style id="mainState3">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-40%,-20%,0);
 
−
}
 
−
</style>
 
−
<style id="mainState4">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-40%,-20%,0);
 
−
    width:300%;
 
−
}
 
−
</style>
 
 
</html>
 
</html>

Latest revision as of 23:21, 18 September 2015