Edit in JSFiddle

<figure class="a animate"> 
    <figcaption><p>sunset</p></figcaption>
</figure>

body {
    margin: 0;
    padding: 0px;
    font-size: 13px;
    font-family: Verdana;
    background: #F1F1F1;
 
}

figure {
   margin:20% auto;
    width: 100px;
    height: 100px;
    border-radius: 200px;
    box-shadow: inset 0 40px 50px rgba(0, 0, 0, 0.2), inset 0 -40px 50px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
    border: 5px solid #fff;
}

figure.a { background: url('http://flickholdr.com/200/300/sea,sun') center center }
figcaption p { display: none }

.animate {
    transition-property: width, height, border-radius;
    transition-duration: 500ms;
    -webkit-transition-property: width, height, border-radius;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: width, height, border-radius;
    -moz-transition-duration: 500ms;
    -o-transition-property: width, height, border-radius;
    -o-transition-duration: 500ms;
}

.animate:hover {
    width: 150px;
    height: 150px;
    border-radius: 200px;
}

figure:hover {
    cursor: pointer;
    box-shadow: inset 0 50px 30px rgba(0, 0, 0, 0), inset 0 -50px 30px rgba(0, 0, 0, 0), inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
}

figure:hover p,
figure p.on {
    padding: 2px;
    height: 20px;
    display: block;
    text-align: center;
    background: #fff;
    margin-top: 42%;
    font-weight: bold;
    font-size: 1em;
    color: #332717;
    border-radius: 2px;
    line-height:20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}