我有一个带有"toggle"-Animation的预告片,可以在JSFiddle或下面看到:
.ax {
height:60px;
width:150px;
background:gold;
}
.caption {
position: absolute;
left:0;
top: 35%;
overflow: hidden;
right: 0;
background-color: rgba(24,88,140,0.7);
width: 100%;
height: 52px;
z-index: 2;
-o-transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
transition: 500ms;
font-weight: lighter;
padding: 10px;
color: #fff;
}
a.link{
color: #fff;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}
.caption:hover {
height: 100%;
top: 0;
}
.box {
position:relative;
width:250px;
height:200px;
}
/*TABLE CELL METHOD*/
.caption2 {
position: …Run Code Online (Sandbox Code Playgroud)