<figure>
    <img src="http://placehold.it/500x500" alt="" />
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolores recusandae, doloremque ratione laboriosam sed corporis illo ipsum quibusdam sit impedit, aperiam placeat voluptate veritatis provident quae quisquam praesentium in.</figcaption>
</figure>
figure {
    height: 500px;
    position: relative;
    width: 500px;
    
    &:hover {
        figcaption {
            opacity: 1;
            visibility: visible;
        }
    }
    
    figcaption {
        background-color: #fff;
        box-sizing: border-box;
        height: 100%;
        opacity: 0;
        padding: 2em;
        position: absolute;
        top: 0;
        transition: opacity .5s ease, visibility .5s;
        visibility: hidden;
        width: 100%;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.