使用浏览器窗口调整内容图像大小？

Question

.tidings {
  float: left;
  margin: 0 3%;
  position: relative;
}

.tidings:after,
.tidings:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity ease 2s;
}

.tidings:after {
 
  content: url('https://s4.postimg.org/466igrsgt/Tidingsrune.png');
}

.tidings:before {
  content: url('https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png');
}

.tidings:hover:after,
.tidings:before {
  opacity: 0
}

.tidings:hover:before,
.tidings:after {
  opacity: 1
}

<a href="http://hvalla.deviantart.com"><span class="tidings"></span></a>

我试图让这个图像链接响应，但到目前为止我还没有运气。什么是能够通过浏览器窗口调整这些图像大小的最佳方法？

JSFiddle.