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 !
g.chng
Posts
-
Thumbnail image hover to make a text appear -
Thumbnail image hover to make a text appearI 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. -
Thumbnail image hover to make a text appear -
Thumbnail image hover to make a text appearHi Armin, I sent you everything at info@laytheme.com, thank you for your help !
-
Thumbnail image hover to make a text appear@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/
-
Thumbnail image hover to make a text appearThank you for your help, I am going to try that !
-
Thumbnail image hover to make a text appear -
Thumbnail image hover to make a text appearHi everyone,
I have a thumbnail grid on my website :
![1 copie.jpg](Image dimensions are too big)
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 :
![2 copie.jpg](Image dimensions are too big)
Thanks by advance
G
website : https://www.gabrielchesnelong.com/category/project-index/
-
sticky/fixed thumbnail grid filters + buttonsThank you for your answer @arminunruh !
-
sticky/fixed thumbnail grid filters + buttonsHi there,
I am trying to separate my filter tags from my thumbnail grid. I've seen a few discussions about it here but it didn't work...
What I have for the moment is this :
I am trying to put the filters on the left and keep them sticky so I can scroll while seeing them with (ideally) custom buttons and to make it look like this :