Centering text vertically with transition
<p>I'm using flex and transition to try and achieve something.</p>

<p>Never used flex before but thought it might work well with what I'm trying to achieve.</p>

<p>please see <a href="https://jsfiddle.net/2qe5a9s1/" rel="nofollow">fiddle</a> </p>

<p>What I'm trying to achieve is when you hover the box, the bottom bar covers the box (this works) and the title and text transition into the the centre of the box. This is half working. </p>

<p>They are centered horizontally but not vertically how I would like. The text should be closer together in the center.</p>

<p>Is this even possible or am I doing something wrong?</p>

<p>html</p>

<pre><code>&lt;a href="#" class="box-link row"&gt;
  &lt;div class="overbox row"&gt;
    &lt;h4&gt;This is a title&lt;/h4&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, usu debet tation cu. Eam assum habemus dignissim ne&lt;/p&gt;
  &lt;/div&gt;    
&lt;/a&gt;
</code></pre>

<p>css</p>

<pre><code>.box-link {
    display: flex;
    flex: 1 1 0px;
    flex-flow: row wrap;
    width: 19.8125rem;
    height: 19.8125rem;
    position: relative;
    overflow: hidden;
    background:red;
    text-align: center;
    border:1px solid red;
}
.box-link .overbox {
    align-items: center;
    justify-content: center;
    transition: 0.5s ease-in-out;
    background-color: rgba(255, 255, 255, 0.6);
    min-height: 15%;
    width: 100%;
    padding: 0.9375rem;
    position: absolute;
    top: 85%;
    left: 0;
    display: flex;
    flex-flow: row wrap;
}
.box-link:hover .overbox {
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
h4 {
  margin:0;
}
</code></pre>