<a title="Click Me" href="#">  
    <!-- 100 b-tag elements will get prepended here -->
    <img src="https://picsum.photos/400/200" />
    <div class="title">
      <div>Click Me</div>
    </div>
    <span class="overlay"></span>
  
</a>
<br />
<a title="Click Me" href="#">
    <!-- 100 b-tag elements will get prepended here -->
    <img src="https://picsum.photos/410/210" />
    <div class="title">
      <div>Click Me<br />Too</div>
    </div>
    <span class="overlay"></span>
  
</a>

/* the b tags number 100 elements to give 10 in each column or row */

a {
  display: block;
  position: relative;
  width: 320px;
  height: 160px;
  overflow: hidden;
  border: 2px gold solid;
  box-sizing: border-box;
  color: red;
  font-family: 'Oswald', sans-serif;
  line-height: 1.25;

}

a div.title {
  position: absolute;
  display: table;
  z-index: 30;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.5em;
  
}

a div.title div {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  
}

a span.overlay {
  position: absolute;
  display: block;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

a:hover {
  color: #fff;  
}

a:hover span.overlay {
  background-color: rgba(0,0,0,0);
  
}

a img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -63%;
  margin-top: -31.5%;
  z-index: 10;
  
}

a * {
  -webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

a img {
  /* things get a little jerky in IE due to no transitions */
  -webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-o-transition: all .25s linear;
	transition: all .25s linear;
}

a b {
  display: block;
  position: relative;
  z-index: 40;
  float: left;
  height: 10%;
  width: 10%;
  opacity: 0;
    
}

/* 10n+x equals column x */
/* colors for columns do not show as rows currently over-write the styling. remove colors in rows to see columns. */
a b:nth-child(10n+1) {
  background-color: red;

}

a b:nth-child(10n+2) {
  background-color: orange;

}

a b:nth-child(10n+3) {
  background-color: yellow;

}

a b:nth-child(10n+4) {
  background-color: green;

}

a b:nth-child(10n+5) {
  background-color: blue;

}

a b:nth-child(10n+6) {
  background-color: indigo;
  
}

a b:nth-child(10n+7) {
  background-color: violet;
  
}

a b:nth-child(10n+8) {
  background-color: magenta;
  
}

a b:nth-child(10n+9) {
  background-color: cyan;
  
}

a b:nth-child(10n+10) {
  background-color: brown;
  
}

/* styling for moving img left and right by column */
a b:nth-child(10n+1):hover ~ img {
  margin-left: -50%;

}

a b:nth-child(10n+2):hover ~ img {
  margin-left: -52.89%;

}

a b:nth-child(10n+3):hover ~ img {
  margin-left: -55.78%;

}

a b:nth-child(10n+4):hover ~ img {
  margin-left: -58.67%;

}

a b:nth-child(10n+5):hover ~ img {
  margin-left: -61.56%;

}

a b:nth-child(10n+6):hover ~ img {
  margin-left: -64.45%;

}

a b:nth-child(10n+7):hover ~ img {
  margin-left: -67.34%;

}

a b:nth-child(10n+8):hover ~ img {
  margin-left: -70.23%;

}

a b:nth-child(10n+9):hover ~ img {
  margin-left: -73.12%;

}

a b:nth-child(10n+10):hover ~ img {
  margin-left: -76.1%;

}



/* nth-child(n+x1) gives row x+1 */
a b:nth-child(n+1) {
    background-color: brown !important;
  
}

a b:nth-child(n+11) {
    background-color: red !important;
  
}

a b:nth-child(n+21) {
    background-color: orange !important;
  
}

a b:nth-child(n+31) {
    background-color: yellow !important;
  
}

a b:nth-child(n+41) {
    background-color: green !important;
  
}

a b:nth-child(n+51) {
    background-color: blue !important;
  
}

a b:nth-child(n+61) {
    background-color: indigo !important;
  
}

a b:nth-child(n+71) {
    background-color: violet !important;
  
}


a b:nth-child(n+81) {
    background-color: magenta !important;
  
}


a b:nth-child(n+91) {
    background-color: cyan !important;
  
}

/* styling for moving img up and down by row */
a b:nth-child(n+1):hover ~ img {
  margin-top: -38.25%;
} 

a b:nth-child(n+11):hover ~ img {
  margin-top: -36.925%;
} 

a b:nth-child(n+21):hover ~ img {
  margin-top: -35.6%;
} 

a b:nth-child(n+31):hover ~ img {
  margin-top: -34.275%;
}

a b:nth-child(n+41):hover ~ img {
  margin-top: -32.95%;
}

a b:nth-child(n+51):hover ~ img {
  margin-top: -31.625%;
}

a b:nth-child(n+61):hover ~ img {
  margin-top: -30.3%;
}

a b:nth-child(n+71):hover ~ img {
  margin-top: -28.975%;
}

a b:nth-child(n+81):hover ~ img {
  margin-top: -27.65%;
}

a b:nth-child(n+91):hover ~ img {
  margin-top: -25%;
}

;(function($){ //anon fxn to preserve jQuery namespace from other js frameworks. Semicolon is for others who forget their ending semicolon
	$(document).ready(function($) {
    
    /* Notes:  1. The javascript in this pen is not necessary and is only presented for clarity. 100 sets of b-tags are generated and prepended to each anchor tag; the b-tags can be hard-coded before the elements within the anchor tag, if desired. The b-tags, via CSS, then control the apparent movement of the background as the mouse moves over the anchor. Note that if a different amount of b-tags are generated then the CSS that controls the apparent movement of the background for each row and column of b-tags must be recalculated. 2. I am thinking that not hard-coding the 100 b-tags for each achor will save some 700 bytes of download for each anchor, so using JS to prepend the b-tags might be useful. 3. Not using a JS mousemove eent, even if throttled, ought to help with page responsiveness, especially with lots of anchors of this type potentially being present. */
    
    var bhtml="";
		for (i = 0; i < 100; i++) {
    	bhtml+='<b></b>';
		}
    $('a').prepend( bhtml );
  }); //end jquery document ready
                
                   
})(jQuery); //end main jQuery anonymous function