You can use a pseudo element for this purpose. No need for extra markup.

http://cssdeck.com/labs/anxnrkhr

<a href="#"><img src="http://placekitten.com/100/100" /></a>

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

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 20px; /* image width */
  height: 100px; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}