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

 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
#mainContainer {
+
#mainContainer,#footerContainer {
−
     overflow-x: hidden;
+
     overflow: hidden;
−
     max-width:80%;
+
     width:80%;
 +
    max-width:1090px;
 
}
 
}
 
#menuButton {
 
#menuButton {
Line 121: Line 122:
 
     transition: filter 0.5s;     
 
     transition: filter 0.5s;     
 
     z-index:2;
 
     z-index:2;
 +
    border-radius:60px;
 +
    overflow:hidden;
 +
    background-clip:border-box;
 
}
 
}
 
.tileBack {
 
.tileBack {
 
     z-index:1;
 
     z-index:1;
−
     opacity: 0;
+
     opacity: 0.4;
 
}
 
}
 
.tileText {
 
.tileText {
 
     position:absolute !important;
 
     position:absolute !important;
 +
    z-index:3;
 
     top:50%;
 
     top:50%;
 
     left:50%;
 
     left:50%;
Line 151: Line 156:
 
}
 
}
 
.content h1 {
 
.content h1 {
−
    display:none;
 
 
/*  vertical-align:middle;*/
 
/*  vertical-align:middle;*/
 
     color: #006EB4 !important;
 
     color: #006EB4 !important;
Line 161: Line 165:
 
     transition: opacity 0.5s;     
 
     transition: opacity 0.5s;     
 
}
 
}
−
.contentInner:hover h1 {
+
.content:hover .tileBack {
−
    display:table-cell;
+
 
}
 
}
−
.contentInner:hover .tileBack {
+
.content:hover .tileIcon {
−
    opacity: 0.4;
+
−
}
+
−
.contentInner:hover .tileIcon {
+
 
     filter: none;
 
     filter: none;
 
     -webkit-filter: grayscale(0);
 
     -webkit-filter: grayscale(0);
Line 176: Line 176:
 
     display:none;
 
     display:none;
 
}
 
}
−
#footerContainer {
+
 
−
    max-width:80%;
+
−
}
+
 
#homepageLogo {
 
#homepageLogo {
 
     width:80%;
 
     width:80%;
Line 184: Line 182:
 
     display:inherit;
 
     display:inherit;
 
}
 
}
−
#homeMainContainer img {
+
 
−
     transition: width 1s,transform 1s;
+
#homepageImageContainer {
 +
     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 214: Line 214:
 
}
 
}
 
}
 
}
−
#homeMainContainer:hover img {
+
/*#homeMainContainer:hover img {
 
     opacity:1;
 
     opacity:1;
−
}
+
}*/
−
#homeMainContainer:hover #homeMainCaption {
+
/*
−
    height:20%;
+
−
}
+
 
#homeMainContainer img {
 
#homeMainContainer img {
−
    width:200%;
 
 
     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 234: Line 241:
 
</style>
 
</style>
  
−
<style id="mainState0">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-20%,0,0);
 
−
}
 
−
</style>
 
−
<style id="mainState1">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-40%,0,0);
 
−
}
 
−
</style>
 
−
<style id="mainState2">
 
−
#homeMainContainer img {
 
−
    transform: translate3d(-50%,0,0);
 
−
}
 
−
</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