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.