li {
    position: relative;
    width: 333px;
    height: 278px;
    background: aqua;
}

a {
    display: block;
    width: 100%;
    height: 100%;
    background: #9cf;
    text-decoration: none;
}

p {
    color: #333;
}

.grid-info {
    position: absolute;
    bottom: 0;
}

h2 {
    background: #000;;
    color: #fff;
}

.grid-reveal {
    overflow: hidden;
    height: 0;
    background: #c0b3b3;
    -webkit-transition: all 0.7s linear;
    -moz-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

a:hover .grid-reveal {
    height: auto; 
}

<ul>
    <li>
        <a href="http://happycog.com">
            <div class="grid-info">
                <h2>The primary heading</h2>
                <div class="grid-reveal">
                    <p>The secondary information to be revelated on hover of linked box.</p>
                </div>
            </div>
        </a>
    </li>
</ul>

jsFiddle