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

Line 1,037: Line 1,037:
 
     box-shadow: 0 0 5px #000
 
     box-shadow: 0 0 5px #000
 
}
 
}
−
.view-tenth img {  
+
.view-third img {
−
transform: scaleY(1);
+
    transition: all 0.2s ease-in;  
−
transition: all 0.7s ease-in-out;
+
 
}
 
}
−
.view-tenth .mask {  
+
.view-third .mask {  
−
    background-color: rgba(255, 231, 179, 0.3);  
+
background-color: rgba(0,0,0,0.6);
−
    transition: all 0.5s linear;
+
opacity: 0;
−
    opacity: 0;
+
transform: translate(460px, -100px) rotate(180deg);
−
}
+
transition: all 0.2s 0.4s ease-in-out;
−
.view-tenth h2{
+
−
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
−
    background: transparent;
+
−
    margin: 20px 40px 0px 40px;
+
−
    transform: scale(0);
+
−
    color: #333;
+
−
    transition: all 0.5s linear;
+
−
    opacity: 0;
+
 
}
 
}
−
.view-tenth p {
+
.view-third h2{
−
    color: #333;
+
transform: translateY(-100px);
−
    opacity: 0;
+
transition: all 0.2s ease-in-out;
−
    transform: scale(0);
+
−
    transition: all 0.5s linear;
+
 
}
 
}
−
.view-tenth a.info {  
+
.view-third p {  
−
    opacity: 0;
+
transform: translateX(300px) rotate(90deg);
−
    transform: scale(0);
+
transition: all 0.2s ease-in-out;
−
    transition: all 0.5s linear;
+
−
}
+
−
 
+
−
.view-tenth:hover img {
+
−
transform: scale(10);
+
−
    opacity: 0;
+
−
}
+
−
.view-tenth:hover .mask {
+
−
opacity: 1;
+
−
}
+
−
.view-tenth:hover h2,
+
−
.view-tenth:hover p,
+
−
.view-tenth:hover a.info{
+
−
    transform: scale(1);
+
−
    opacity: 1;
+
 
}
 
}
 +
.view-third a.info {
 +
transform: translateY(-200px);
 +
transition: all 0.2s ease-in-out;
 +
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 16:17, 1 November 2017