I was wondering if it’s at all possible to create a hover effect on multiple images so when you hover over one image, it puts an overlay on the website in the background and puts a textbox on top of that overlay.
Use Case: For our company website, we have a customer section with the logos of the largest customers we serve (15 or so) and would like to create the above hover effect when users hover over each customer logo to read more about them. So you can imagine 15 different textboxes, 1 for each customer that are brought up individually when hovering over each customer logo.
If not possible, I’m all ears to suggestions on how this might be done in an easier fashion/alternative solutions.
Yes. It’s possible.
But I’m not sure if you want to have the overlay under the images (you said “in the background”) or over the images (after all, it is an overlay ).
It’s a little bit different.
do you want a full screen overlay or only over the hovered image?
You can do it either with a lightbox or with a box.
Lightbox Vs box
Pros (for lightbox):
Easier to edit as it’s like a separate page.
It’s automatically occupied the entire screen regardless the viewpoint size.
Cons:
Slower reaction (At least it was slow in the past, I haven’t checked it after the recent improvement)
(P.S, there’s a third option to use a custom element, but it requires more coding).
Let’s say you go for a regular box.
Then you can either do it with a database or with hard coded data.
Add an overlay box (90% opacity, collapsed on load over the page)
Use onMoseIn do detect hover on.
Connect the ovelay box contant placeholders to the dataset.
Then on hover filter the dataset to display the relevant text and image on the overlay and expand the overlay.
Fantastic, thank you! This helps a lot! I’ll try the lightbox option to see if it got faster. If not, option 2 is the way to go. Appreciate the quick response!
