<figure>
  <a href="javascript:void(0);">
    <img src="https://www.ibnet.ne.jp/column/web/200924/demo/sample.jpg" alt="" width="100%"><figcaption>キャプションが入ります。</figcaption>
  </a>
</figure>

body{
	font-size: 14px;
	color: #333;
}
figure{
	margin:0;
	width: 300px;
}
a{
	color: #333;
	text-decoration: none;
}
a img{
  transition: 0.4s;
}
a:hover img{
    transform: translate(-4px,-4px);
    box-shadow: 4px 4px rgba(0,0,0,0.2);
}
figcaption{
	position: relative;
	display: inline-block;
}
figcaption:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #337ab7;
    transition: 0.4s;
}
a:hover figcaption:after{
	width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.