|
|
| Line 1: |
Line 1: |
| − | <style>
| |
| − |
| |
| − | .view {
| |
| − | width: 400px;
| |
| − | height: 450px;
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | cursor: default;
| |
| − |
| |
| − | }
| |
| − | .view .mask, .view .content {
| |
| − | width: 400px;
| |
| − | height: 400px;
| |
| − | 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: Arial, serif;
| |
| − | font-size: 15px;
| |
| − | 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;
| |
| − | }
| |
| − | .view a.info:hover {
| |
| − | box-shadow: 0 0 5px #000
| |
| − | }
| |
| − | .view-eighth .mask {
| |
| − | background-color: rgba(0,0,0,0.6);
| |
| − | top: -200px;
| |
| − | opacity: 0;
| |
| − | transition: all 0.3s ease-out 0.5s;
| |
| − | }
| |
| − | .view-eighth h2{
| |
| − | transform: translateY(-200px);
| |
| − | transition: all 0.2s ease-in-out 0.1s;
| |
| − | }
| |
| − | .view-eighth p {
| |
| − | transform: translateY(-200px);
| |
| − | transition: all 0.2s ease-in-out 0.2s;
| |
| − | }
| |
| − | .view-eighth a.info {
| |
| − | transform: translateY(-200px);
| |
| − | transition: all 0.2s ease-in-out 0.3s;
| |
| − | }
| |
| − | .view-eighth:hover .mask {
| |
| − | opacity: 1;
| |
| − | top: 0px;
| |
| − | transition-delay: 0s;
| |
| − | animation: bounceY 0.9s linear;
| |
| − | }
| |
| − | .view-eighth:hover h2 {
| |
| − | transform: translateY(0px);
| |
| − | transition-delay: 0.4s;
| |
| − | }
| |
| − | .view-eighth:hover p {
| |
| − | transform: translateY(0px);
| |
| − | transition-delay: 0.2s;
| |
| − | }
| |
| − | .view-eighth:hover a.info {
| |
| − | transform: translateY(0px);
| |
| − | transition-delay: 0s;
| |
| − | }
| |
| − | @keyframes bounceY {
| |
| − | 0% { transform: translateY(-205px);}
| |
| − | 40% { transform: translateY(-100px);}
| |
| − | 65% { transform: translateY(-52px);}
| |
| − | 82% { transform: translateY(-25px);}
| |
| − | 92% { transform: translateY(-12px);}
| |
| − | 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 600px) {
| |
| − | table {width:100%;}
| |
| − | thead {display: none;}
| |
| − | tr:nth-of-type(2n) {background-color: inherit;}
| |
| − | tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
| |
| − | tbody td {display: block; text-align:center;}
| |
| − | tbody td:before {
| |
| − | content: attr(data-th);
| |
| − | display: block;
| |
| − | text-align:center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| | {{TU_Dresden/Header}} | | {{TU_Dresden/Header}} |
| | <html> | | <html> |
