Thumbnail image hover to make a text appear

[g.chng]

Hi everyone,

I have a thumbnail grid on my website :


I was wondering if it was possible to hover these thumbnails images to make appear a fixed/sticky text (that would be the description) like this :


Thanks by advance

G

website : https://www.gabrielchesnelong.com/category/project-index/

[g.chng]

[arminunruh]

yea i think you could use the project description feature
https://laytheme.com/documentation/project-description.html

and then use custom css to put the description there

could be a little hard to do

[g.chng]

Thank you for your help, I am going to try that !

[g.chng]

@arminunruh I tried to add some js and CSS. I first wrote enabled the project description feature and then disabled the feature, my goal was to reach the project description with the js even it's disabled and make it appear when I hover it. The hover works but it doesn't make the description appear... Here are my custom CSS and JS :
CSS :
/* Thumbnail grid style /
.thumbnail-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px; / Adds spacing around the grid /
margin: 0; / Removes default margins /
list-style: none; / Removes list bullets /
position: relative; / Relative position to manage z-index */
}

/* Thumbnail style */
.thumbnail-wrap {
position: relative;
}

/* Hover effect to display project description /
.thumbnail-wrap:hover::before {
content: attr(data-description); / Displays project description /
position: fixed;
top: 40px;
left: 8px;
padding: 10px; / Adds spacing around description /
background-color: rgba(0, 0, 0, 0.5); / Semi-transparent background color /
color: white; / Text color /
z-index: 9999; / Ensures description is above any other content */
}

/* Footer */
#footer-region {
position: fixed;
bottom: 20px;
left: 8px;
}

JS :
<script>
// Select all project thumbnails
const thumbnails = document.querySelectorAll('.thumbnail-wrap');

// Iterate through each thumbnail
thumbnails.forEach(thumbnail => {
// Listen for hover event
thumbnail.addEventListener('mouseenter', () => {
// Get corresponding project description
const description = thumbnail.querySelector('.descr');
if (description) {
// Add description as a data attribute for use in CSS
thumbnail.setAttribute('data-description', description.textContent.trim());
}
});
});
</script>

Do you have any tips to make it work ?

Thanks by advance

G

Website link : https://www.gabrielchesnelong.com/

[arminunruh]

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

[g.chng]

Hi Armin, I sent you everything at info@laytheme.com, thank you for your help !

[g.chng]

@arminunruh *

[arminunruh]

yea please wait for my answer, i was on holidays for a few days

[g.chng]

I didn't mean to bother you sorry, I just noticed I didn't mention your name in the first message so I didn't know if you were going to see it.
It's as you can, and if anything I am willing to pay as well. Thanks again for your help.

[arminunruh]

sure! no problem!
this is what it looks like: https://www.dropbox.com/scl/fi/xp8caw1uo1l59cw4ma37z/Screen-Recording-2024-02-27-at-11.52.03.mov?rlkey=ddmp8xd4ggavwhjz7pelv2i3b&dl=0

so what i did now:

custom css:

body.no-touchdevice .my-description{
    position: fixed;
    top: 40px;
    left: 8px;
    z-index: 90;
    width: 20%;
}
body.no-touchdevice .my-description a{
    color: black;
}
body.no-touchdevice .thumbnail-wrap .lay-textformat-parent>*:not(.thumb){
    display: none;
}

custom head content:

<script>
    jQuery(document).on('mouseenter', '.thumbnail-wrap', function(){
        if( jQuery("body").hasClass("no-touchdevice") ) {
            // var $text = jQuery(this).find('.lay-textformat-parent>*:not(a.thumb)').clone();
            var $text = jQuery(this).find('.lay-textformat-parent>*').clone();
            jQuery('.my-description').html($text)
        }
    });
    window.laytheme.on("transition_out", function(){
        jQuery('.my-description').html('')
    })
</script>

custom html at bottom:

<div class="my-description">
</div>

Then i enabled "project descriptions" in "lay options"
and actually entered a project description for a project, just for the upper left one.

if all of your projects have a description, you can un-comment this line:
// var $text = jQuery(this).find('.lay-textformat-parent>*:not(a.thumb)').clone();

and then make this line a comment by prepending //:

var $text = jQuery(this).find('.lay-textformat-parent>*').clone();

then only the descriptions will be used, not the project titles too

i see you want more work done on this as you asked for in your email address.
if you want to pay me 100€ per hour i can work more on this

but i do believe this should be sufficient and maybe you can find a solution for your other custom code for your time

also please read this:
https://laytheme.com/documentation/custom-javascript.html

and this:
https://laytheme.com/documentation/custom-css-styling.html

it might help you with general understanding

[g.chng]

Thank you so much for this. I am going to try to make it work by myself and if I need more help on the website I will keep you up to work with you.
Thank you again for that, it helps a lot !
Have a good evening !