Transition with rounded corners

by lovromar

HTML

<figure>
    <img src="http://lorempixel.com/100/100">
    <figcaption>Hover</figcaption>
</figure>

CSS

figure {
    border-radius: 100%;
    display: block;
    height: 100px;
    margin: 100px auto;
    overflow: hidden;
    width: 100px;
}
figure img {
    display: block;
}
figure figcaption {
    background: hotPink;
    color: #fff;
    display: inline-block;
    font: bold 16px/100px sans-serif;
    height: 100%;
    margin-top: -100%;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    vertical-align: top;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
}
figure:hover figcaption {
    cursor: default;
    line-height: 500px;
    margin-top: -200%;
}