Looking to add a "toggle" animation on my Teaser, here's the code:
.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: 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;
display:table;
}
.caption2:hover {
height: 100%;
top: 0;
}
a.link2{
display:table-cell;
vertical-align: middle;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}<div class="box">
<div class="caption">
<a href="#" class="link">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><br><br
<br><br>
table cell method (div.caption2 display:table and a.link display:table-cell + vertical-algin:middle)
<br><br>
<div class="box">
<div class="caption2">
<a class="link2" href="#">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectuSeeking a solution to vertically center both one and two-line links in the blue box. The CSS property lineheight doesn't work for multi-line links, and the table(-cell)-method also has limitations. Any suggestions for achieving this?