# Random thumbnail positions on hover of randomly positioned text
**URL:** https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200
**Category:** Uncategorized
**Created:** [January 10, 2023, 10:28am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200 "2023-01-10T10:28:02Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [January 10, 2023, 10:28am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/1 "2023-01-10T10:28:02Z")
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 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/](https://jsfiddle.net/2jddfsjad/ewk4dzLp/9/)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 10, 2023, 6:02pm UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/2 "2023-01-10T18:02:55Z")
This is a fun one! Also, welcome back @4a0g1kfa54 🙂
Will the thumbnails need to be in a grid formation, or can they be in a random-ish arbitrary arrangement? Will the thumbnails all be the same size?
---
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [January 10, 2023, 9:49pm UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/3 "2023-01-10T21:49:19Z")
> [@kirupa](#):
>
> they be in a random-ish arbitrary arrangement? Will the thumbnails all be the same size?
Hi @kirupa ! Yes they should be in a random-ish arbitrary arrangement and the thumbnails are all the same size. 🙂
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 11, 2023, 6:02am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/4 "2023-01-11T06:02:16Z")
Sorry - things got a bit too busy today for me to look into this. I am hoping to find some time tomorrow morning to fiddle with this 😀
---
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [January 11, 2023, 10:26am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/5 "2023-01-11T10:26:10Z")
no worries @kirupa - i’m interesting to hear your thoughts on this 🙂
---
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [January 12, 2023, 10:48am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/6 "2023-01-12T10:48:28Z")
so I came across Jason Knight’s random thumb position snippet over at [https://forums.htmlhelp.com/](https://forums.htmlhelp.com/) - a non-jquery effort!
All i need now is for multiples of these grey bounding boxes, to also randomly position on a screen.
HTML
```auto
```
CSS
```auto
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%;
}
```
JS
```auto
{ // scope isolating block
const
origins = [
{ x : 0, y : 0 },
{ x : 0, y : 1 },
{ x : 1, y : 1 },
{ x : 1, y : 0 },
],
buttonImgEvent = (e) => {
let img = e.currentTarget.nextElementSibling;
if (img) {
let
originIndex = Math.floor(origins.length * Math.random());
const
wrapper = e.currentTarget.closest(".buttonThumbs"),
halfWidth = wrapper.clientWidth / 2,
halfHeight = wrapper.clientHeight / 2;
do {
img.style.left = (
Math.random() * (halfWidth - img.clientWidth) +
origins[originIndex].x * halfWidth
) + "px";
img.style.top = (
Math.random() * (halfHeight - img.clientHeight) +
origins[originIndex].y * halfHeight
) + "px";
originIndex = (originIndex + 1) % origins.length;
} while (img = img.nextElementSibling);
}
};
for (const button of document.querySelectorAll(".buttonThumbs button")) {
button.addEventListener("mouseover", buttonImgEvent);
button.addEventListener("focus", buttonImgEvent);
}
} // end scope isolation
```
Here is his codepen: [https://codepen.io/jason-knight/pen/ZEjKvVd](https://codepen.io/jason-knight/pen/ZEjKvVd)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 13, 2023, 5:48am UTC](https://forum.kirupa.com/t/random-thumbnail-positions-on-hover-of-randomly-positioned-text/656200/7 "2023-01-13T05:48:44Z")
So sorry for not having time for this. Life and work gets in the way sometimes 😀