Random thumbnail positions on hover of randomly positioned text

[r43gf34gsf]

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/

 

[r43gf34gsf]

So I came across Jason Knight's random thumb position snippet over at https://forums.htmlhelp.com/ - a non-jquery effort!

All I i'm trying to make multiples of these grey bounding boxes, and for them to randomly position on a screen too.


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>

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%;
}

JS

{ // 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

 

[linotek]

To create a thumbnail that changes position on hover of randomly positioned text, you can use CSS and JavaScript (jQuery).

In CSS, you can use absolute positioning to randomly place the text elements and set the thumbnails to have a fixed position, initially hidden with display:none;. On hover of each text element, you can use JavaScript (jQuery) to change the position of the corresponding thumbnail.

Here is an example code snippet:

HTML:

php
Copy code
<div class="text-container">
<div class="text-element">Text 1</div>
<div class="text-element">Text 2</div>
<div class="text-element">Text 3</div>
</div>

<div class="thumbnail-container">
<div class="thumbnail" id="thumbnail1">Thumbnail 1</div>
<div class="thumbnail" id="thumbnail2">Thumbnail 2</div>
<div class="thumbnail" id="thumbnail3">Thumbnail 3</div>
</div>
CSS:

css
Copy code
.text-container {
position: relative;
}

.text-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.thumbnail-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.thumbnail {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.text-element:hover + .thumbnail {
display: block;
}
JavaScript (jQuery):

javascript
Copy code
$(document).ready(function() {
$('.text-element').each(function() {
var x = Math.floor(Math.random() * 90) + 5;
var y = Math.floor(Math.random() * 90) + 5;
$(this).css({
'top': x + '%',
'left': y + '%'
});
});

$('.text-element').hover(function() {
var thumbnailId = $(this).index() + 1;
var x = Math.floor(Math.random() * 90) + 5;
var y = Math.floor(Math.random() * 90) + 5;
$('#thumbnail' + thumbnailId).css({
'top': x + '%',
'left': y + '%',
'display': 'block'
});
}, function() {
var thumbnailId = $(this).index() + 1;
$('#thumbnail' + thumbnailId).css({
'display': 'none'
});
});
});
In this example, the text elements are randomly placed using CSS and JavaScript (jQuery). On hover of each text element, the corresponding thumbnail is also randomly repositioned and displayed. When the mouse pointer moves away from the text element, the thumbnail is hidden again.


for more : https://visualvisionaries.blogspot.com/2023/01/random-thumbnail-positions-on-hover-of.html