Difference between revisions of "Template:TU Dresden/CSS"

Line 1,039: Line 1,039:
 
     box-shadow: 0 0 5px #000
 
     box-shadow: 0 0 5px #000
 
}
 
}
−
.view-third img {
+
.view-eighth .mask {  
−
    transition: all 0.2s ease-in;
+
background-color: rgba(255, 255, 255, 0.7);
−
}
+
top: -200px;
−
.view-third .mask {  
+
−
background-color: rgba(0,0,0,0.6);
+
 
opacity: 0;
 
opacity: 0;
−
transform: translate(460px, -100px) rotate(180deg);
+
transition: all 0.3s ease-out 0.5s;
−
transition: all 0.2s 0.4s ease-in-out;
+
 
}
 
}
−
.view-third h2{
+
.view-eighth h2{
−
transform: translateY(-100px);
+
    transform: translateY(-200px);
−
transition: all 0.2s ease-in-out;
+
transition: all 0.2s ease-in-out 0.1s;
 
}
 
}
−
.view-third p {  
+
.view-eighth p {  
−
transform: translateX(300px) rotate(90deg);
+
    color: #333;
−
transition: all 0.2s ease-in-out;
+
    transform: translateY(-200px);
 +
transition: all 0.2s ease-in-out 0.2s;
 
}
 
}
−
.view-third a.info {  
+
.view-eighth a.info {  
−
transform: translateY(-200px);
+
    transform: translateY(-200px);
−
transition: all 0.2s ease-in-out;
+
transition: all 0.2s ease-in-out 0.3s;
 
}  
 
}  
−
 
+
.view-eighth:hover .mask {  
−
.view-third:hover .mask {  
+
opacity: 1;
−
opacity:1;  
+
top: 0px;  
−
transition-delay: 0s;
+
transition-delay: 0s;  
−
transform: translate(0px, 0px);
+
    animation: bounceY 0.9s linear;
 +
}
 +
.view-eighth:hover h2 {
 +
    transform: translateY(0px);
 +
transition-delay: 0.4s;
 
}
 
}
−
.view-third:hover h2 {  
+
.view-eighth:hover p {  
−
transform: translateY(0px);  
+
transform: translateY(0px);
−
transition-delay: 0.5s;  
+
transition-delay: 0.2s;
 
}
 
}
−
.view-third:hover p {  
+
.view-eighth:hover a.info {  
−
     transform: translateX(0px) rotate(0deg);
+
     transform: translateY(0px);
−
transition-delay: 0.4s;
+
transition-delay: 0s;
 
}
 
}
−
.view-third:hover a.info {  
+
@keyframes bounceY {
−
transform: translateY(0px);
+
    0% { transform: translateY(-205px);}
−
transition-delay: 0.3s;
+
    40% { transform: translateY(-100px);}
 +
    65% { transform: translateY(-52px);}
 +
    82% { transform: translateY(-25px);}
 +
    92% { transform: translateY(-12px);}
 +
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 16:31, 1 November 2017