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

Line 969: Line 969:
 
     }
 
     }
 
}
 
}
 +
.view {
 +
    width: 300px;
 +
    height: 200px;
 +
    margin: 10px;
 +
    float: left;
 +
    border: 10px solid #fff;
 +
    overflow: hidden;
 +
    position: relative;
 +
    text-align: center;
 +
    box-shadow: 1px 1px 2px #e6e6e6;
 +
    cursor: default;
 +
    background: #fff url(../images/bgimg.jpg) no-repeat center center
 +
}
 +
.view .mask, .view .content {
 +
    width: 300px;
 +
    height: 200px;
 +
    position: absolute;
 +
    overflow: hidden;
 +
    top: 0;
 +
    left: 0
 +
}
 +
.view img {
 +
    display: block;
 +
    position: relative
 +
}
 +
.view h2 {
 +
    text-transform: uppercase;
 +
    color: #fff;
 +
    text-align: center;
 +
    position: relative;
 +
    font-size: 17px;
 +
    padding: 10px;
 +
    background: rgba(0, 0, 0, 0.8);
 +
    margin: 20px 0 0 0
 +
}
 +
.view p {
 +
    font-family: Georgia, serif;
 +
    font-style: italic;
 +
    font-size: 12px;
 +
    position: relative;
 +
    color: #fff;
 +
    padding: 10px 20px 20px;
 +
    text-align: center
 +
}
 +
.view a.info {
 +
    display: inline-block;
 +
    text-decoration: none;
 +
    padding: 7px 14px;
 +
    background: #000;
 +
    color: #fff;
 +
    text-transform: uppercase;
 +
    box-shadow: 0 0 1px #000
 +
}
 +
.view a.info:hover {
 +
    box-shadow: 0 0 5px #000
 +
}
 +
.view-tenth img {
 +
transform: scaleY(1);
 +
transition: all 0.7s ease-in-out;
 +
}
 +
.view-tenth .mask {
 +
    background-color: rgba(255, 231, 179, 0.3);
 +
    transition: all 0.5s linear;
 +
    opacity: 0;
 +
}
 +
.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 {
 +
    color: #333;
 +
    opacity: 0;
 +
    transform: scale(0);
 +
    transition: all 0.5s linear;
 +
}
 +
.view-tenth a.info {
 +
    opacity: 0;
 +
    transform: scale(0);
 +
    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;
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 16:05, 1 November 2017