JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="inner-border">
        <a href="#">
            <img src="http://www.chrisflores.net/portal2/upload/21_02_2011_174423_DSC04825_receita_roseli_cortada___div.jpg" />
            <span>Simple caption</span>
        </a>
    </div>
</div>

CSS

body {
    margin:0;
}
.wrapper img {
  width: 100%;
}
.inner-border {
  margin: 0;
  position: relative;
  line-height: 0;
}
.inner-border:before {
  border: 30px solid rgba(255,255,255,.3);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.inner-border:hover:before {
  border: 30px solid #fff;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.inner-border span {
  font: bold 16px Arial;
  color: #333;
  position: absolute;
  left: 0;
  bottom: 5px;
  padding: 0 22px;  
}