<div class="container pts mtm pbs cf intro">
  <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--1 mrs"><i class="inline-link-text small">hover over &hellip;</i></a>  
  <p class="small mtxl mbs">Image of &#8216;Royal Copenhagen Cat&#8217; ( &#8216;Maneki-neko&#8217; cat overpainted, before and after ) by <a href="http://www.bureauofbetterment.com/about/">Mette Hornung Rankin</a></p>
  <p><a href="http://www.bureauofbetterment.com/blog/royal-copenhagen-cat/" class="block">read more about the original story of the &#8216;Royal Copenhagen Cat&#8217; on bureauofbetterment.com</a></p> 
</div> 

<div class="container pts pbm cf mtm">
  <ul class="group-images">
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--1"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>  
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--2"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--3"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--4"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--5"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
  </ul> 
</div>

<div class="container pts pbm mbl cf">
  <ul class="group-images"> 
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--6"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   

    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--7"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>  
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--8"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--9"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
    <li> 
    <a href="#" data-tooltip="This is a pure CSS tooltip" class="img-sprite img-sprite--10"><i class="inline-link-text small">hover over &hellip;</i></a>   
    </li>   
  </ul> 
</div>

* { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  /* outline: 1px dotted salmon; */
}
body {
  font: 100%/1.375 AvenirNext-Regular, "Lucida Grande", "Lucida Sans Unicode", Corbel, "Segoe Ui", "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif; 
} 
ol, ul {
  list-style: none; 
} 
a {
  text-decoration: none; 
  color: #df2020;
}
a:hover {
  color: #127;
}

.group-images li:nth-of-type(5) a[data-tooltip]:after { 
  left: auto;
  right: 0;
} 
.img-sprite {
  background-repeat: no-repeat; 
  height: 220px;
  width: 125px;
  float: left;
  display: block;
  background-image: url(//placekitten.com/250/220);
  /* background-position: 0 0;  */
}

.img-sprite:hover {
  background-position: -125px 0; 
}
.img-sprite--1 {
  background-image: url(https://lh4.googleusercontent.com/-oTXabaie-kU/UZn5U9bjanI/AAAAAAAAAbY/aTL6STe0uAI/s800/royal-copenhagen-cat-220x250.jpg); 
} 
.img-sprite--2 {
  /* background-image: url(../img/image-2.jpg);  */
} 
.img-sprite--3 {
  /* background-image: url(../img/image-3.jpg);  */
} 
/* continue like this until: */ 
.img-sprite--10 {
  /* background-image: url(../img/image-10.jpg);  */
} 

.group-images {
  display: block; 
  width: 100%;
}
.group-images li,
.group-images li a {
  float: left;
  /* display: block; */
}
.group-images li {
  margin-bottom: 1.5em;
}   
.group-images li {
  width: 125px;
  clear: left;
}
.group-images li:nth-of-type(5) {
  margin-right: 0;
}
.group-images li a {
  width: 100%;
} 
.container {
  margin: 1em auto 0;
  width: 90%; 
}

.pts { 
  padding-top: 1em;
}
.pbs { 
  padding-bottom: 1em;
} 
.pbm { 
  padding-bottom: 1.5em;
} 
.ptl { 
  padding-top: 2em;
} 
.mtm {
  margin-top: 2em;
}
.mtxl {
  margin-top: 4em;
} 
.mrs {
  margin-right: 1em;
} 
.mbs {
  margin-bottom: 1em;
} 
.mbl {
  margin-bottom: 3em;
} 
.inline-link-text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: -1.5em;
  padding: .15em 15%;
  text-align: center;
}
.img-sprite:hover .inline-link-text {
  /* display: none; */
  margin-top: -8em;
} 
.small { 
  font-size: .8125em;
}
.block {
  display: block;
}
.cf:before, 
.cf:after {
  content: " ";
  display: table;
} 
.cf:after,
.clear {
  clear: both;
}
.intro p {
  margin-left: 20%;
}

a[href ^="http"]:after {
  content: " \2197";
  font-family: Calibri, "Lucida Grande", "DejaVu Sans", "Linux Libertine", Libertine, "Arial Unicode MS", Futura, sans-serif;
  font-size: .875em;
  margin-left: .5em;
  font-weight: bold;
  color: #39F;
  background-color: #EEE; 
  padding-right: .2em; 
  border: 1px solid #DDD;
  border-bottom-color: #BBB;
  border-right-color: #CCC;
  border-radius: 12px 12px 12px 0;           
  vertical-align: top;
}

@media only screen and (min-width: 320px) {
  .group-images li {
    margin-right: 1.5%;
    clear: none;
  }
 /* http://www.impressivewebs.com/pure-css-tool-tips/ */
[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  text-decoration: none;
  /* border-bottom: solid 1px; */
}

[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 20px solid #0090ff;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  visibility: hidden;
  top: -18px;
  left: 0;
}

[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -35px;
  left: 0;
  background: #0090ff;
  padding: 5px 15px;
  border-radius: 10px;
  white-space: nowrap;
  visibility: hidden;
}

[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  visibility: visible;
  transition: all .3s linear;
} 
}

@media only screen and (min-width: 820px) {
  .container {
    width: 40.5625em; 
  }
  .group-images li { 
    width: 125px;
    margin-right: 6px;
    clear: none;
    margin-bottom: 0;
  }
  .group-images li:nth-of-type(5) {
    margin-right: 0;
  } 
}

/* https://css-tricks.com/css-sprites/
 * http://www.impressivewebs.com/pure-css-tool-tips/ 
  * https://css-tricks.com/forums/discussion/25004/how-to-make-a-rollover-imge-with-tooltips
  */