Random thumbnail positions on hover of randomly positioned text

I would like that when a user hovers different words, that a random arrangement of thumbnails fades-in.

Some caveats:

• thumbs should stay fairly close to the corresponding text.
• thumbs can overlap, but not fully.
• both the text and the thumb positions should be random on every page refresh
• text and thumbs shouldn't fall outside the screen.
• should be scalable (i.e.. I will have max. 10 texts and max. 10 thumbs for every text. the thumbs could spread concentrically if need be)

See the attached image for an example of what I mean.

And here's a fiddle of what I have so far: https://jsfiddle.net/2jddfsjad/ewk4dzLp/9/

 

So I came across Jason Knight's random thumb position snippet over at https://forums.htmlhelp.com/ - a non-jquery effort!
Now, I am trying to make multiples of these grey divs, that also appear in random positions when a page is refreshed. Ideally it would be scalable (i.e.. I will have max 10 grey divs).

HTML

<div class="buttonThumbs">
  <button type="button">text</button>
  <img src="https://placeimg.com/100/100/animals" alt="describe this, alt is not optional">
  <img src="https://placeimg.com/100/100/people" alt="describe this, alt is not optional">
  <img src="https://placeimg.com/100/100/tech" alt="describe this, alt is not optional">
  <img src="https://placeimg.com/100/100/nature" alt="describe this, alt is not optional">
<!-- .buttonThumbs --></div>

Code (markup):

CSS

html, body {
  height:100%;
}
body {
  display:flex;
  align-items:center;
  justify-content:center;
}
.buttonThumbs {
  position:relative;
  width:30em;
  height:20em;
  max-width:100%;
  max-height:100%;
  margin:auto; /* force scrollbars if too small */
  background:#EEE;
}
.buttonThumbs > * {
  position:absolute;
}
.buttonThumbs button {
  top:50%;
  left:50%;
  border:0;
  background:transparent;
  transform:translate(-50%, -50%);
}
.buttonThumbs img {
  width:100px;
  height:100px;
  opacity:0;
  transition:opacity 1s;
}
.buttonThumbs button:focus ~ img,
.buttonThumbs button:hover ~ img {
  opacity:1;
}
.buttonThumbs img:nth-of-type(1) {
  top:25%;
  left:25%;
}
.buttonThumbs img:nth-of-type(2) {
  top:25%;
  left:75%;
}
.buttonThumbs img:nth-of-type(3) {
  top:75%;
  left:25%;
}
.buttonThumbs img:nth-of-type(4) {
  top:75%;
  left:75%;
}

Code (markup):

JS

Here is his codepen: https://codepen.io/jason-knight/pen/ZEjKvVd