How to create border offset?

Question

Hi I was wondering how I can offset a border from a div, like the image:

So the gray border is the same size as the image, only it is offset to the right corner. This is my markup:

<figure class="col-md-10 col-md-offset-1">
        <img src="images/image.jpg" alt="Image">
        <figcaption>
            <p>
            Praesent at luctus erat, non finibus justo. 
            <a href="#">share</a>
            </p>
        </figcaption>
</figure><!-- End figure.col-md-10 -->

Answer 1

It's very simple with pseudo elements.

Example

div {
  position: relative;
  margin: 50px 0 0 50px;
  display: inline-block;
}
img {
  display: block;
}
div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid gray;
  left: 30px;
  top: -30px;
  z-index: -1;
}

<div>
  <img src="http://placehold.it/350x150" alt="">
</div>