Html

<div class="box">
    <div class="figure">
        <img src="image.jpg">
        <div class="caption">
            <div class="about">
                <h2>Image Hover Effects</h2>
                <p>Lorem ipsum dolor sit amet, ea quis illum ius. Te eius luptatum accusamus mei. Dicit errem eos et, at pri vidit perfecto. Quo nonumy propriae ne, ius et alii nostro voluptaria. Ad eam vivendo molestie.</p>
            </div>
        </div>
    </div>
</div>

CSS

body
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #262626;
}
.box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 500px;
    background: #00bcd4;
    overflow: hidden;
}
.figure
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.figure img
{
    width: 100%;
    transition: .5s;
}
.box:hover .figure img
{
    transform: scale(0);
}
.caption
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e91e63;
    transform: scale(2);
    opacity: 0;
    transition: .5s;
}
.box:hover .caption
{   
    transform: scale(1);
    opacity: 1;
}
.about
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
    box-sizing: border-box;
    text-align: center;
}
.about h2
{
    color: #fff;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 30px;
}
.about p
{
    color: #fff;
    margin: 20px 0 0;
    padding: 0;
    font-size: 16px;
}

See Demo