「:after」を使って画像に透過ボーダーを設定する

scss

a {
  display:inline-block;
  position: relative;
}

a:after{
  border: 1px solid rgba(0, 0, 0, .1);
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

a:hover {
  &:after{
    border: 1px solid rgba(0, 0, 0, .5);
  }
}

html

<a href="#"><img src="画像パス" /></a>