<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>