A Pen by Stan Williams.

index.html

<a class="responsive_border" href="#">
  <img src="http://placekitten.com/480/320?image=3" alt="Meow">
</a>
<!-- Note: appending ?image=3 to url from 
placekitten.com goes to image # 3 which is a Public Domain Image , you can specify other images  by appending ?image=n to your request (where n is the number of the image you want)

list of images and atrtribution, or license of each is here:
  http://placekitten.com/attribution.html

--->

Responsive-Border-Image-with-Scaling-Image-on-Hover.markdown

Responsive Border Image with Scaling Image on Hover

Responsive Border Image with Scaling Image. Resize images on hover, while retaining border size.

A Pen by Stan Williams on CodePen.

License.

style.scss

@import "compass";
body, html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

$padding: 4px;
.responsive_border {
  display: inline-block;
  border: 1px solid #ccc;
  padding: $padding;
  position: relative;
  overflow: hidden;
  
  img {
    display: block;
    transition: transform 125ms ease-out;
    transform: scale(1, 1);
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: $padding solid #fff;
  }
  
  &:hover img {
    transform: scale(1.05, 1.05);
  }
}

Demo, preview live and edit live and see the results in real time here:
http://codepen.io/Stanssongs/pen/sldCv