How to show Alt Text of image from CMS multi-image field on hover?

Hi there,

I’m currently working on a site where I have a multi-image input in the CMS, which is displayed in a grid on the page. Is there a way to show the alt text when you hover over the image?

Any help would be greatly appreciated :slight_smile:

Many thanks,

Tom


https://preview.webflow.com/preview/wildpark-5b9d50?utm_medium=preview_link&utm_source=designer&utm_content=wildpark-5b9d50&preview=6c8fb13b0b17773c5afe8e8e0d2bfe9f&workflow=preview

Sorry to bump this up - is anybody able to assist? Thank you!

Here’s an updated link - https://preview.webflow.com/preview/wildpark-entertainment?utm_medium=preview_link&utm_source=designer&utm_content=wildpark-entertainment&preview=6c8fb13b0b17773c5afe8e8e0d2bfe9f&workflow=preview

Hi everyone, sorry - super desparate to resolve if anybody’s able to assist;

HI @thomasjpm here is short video of one way how to display image Alt text on image hover. It is combination of custom JS code and WF animation but feel free to use other approach like only custom code.

Here is code I’ve used in demo to have something to start with

const [...multi] = document.querySelectorAll(".multi-img__w")

multi.forEach(img =>{
	const altHolder = img.querySelector(".img-alt-content")
	const alt = img.querySelector("img").getAttribute("alt")
	altHolder.innerText = alt
})

Hope that will help to solve your request

4 Likes

HI @thomasjpm do you need further assistance with provided solution?

Hi Stan, firstly thank you so much for taking the time to record this and help - I really appreciate it.

I’ve followed everything but am having a little difficulty with where to place the code - are you able to advise?

Many thanks,

Tom

HI @thomasjpm there are 3 places you can add any custom code:

  1. Site setting => code will be applied on each page
  2. Page setting => code will be applied on current page
  3. Embed element => code will be applied on current page

If you willing to learn more about where and why to place custom code please visit WFUniversity to learn how to work with this platform or use search field of this forum to find information you need.

Once you will be able to make it work by applying code to let say eg. to page setting feel free to close your request as solved. :wink:

code in page setting

PS: Keep in mind that a javaScript can’t run in Designer. To see result you need to publish changes and open live page.

3 Likes

Hi Stan,

Thank you so, so, so much - this works brilliantly and was so simple to implement.

Really grateful for your time and hope you have a great week!

Very best,

Tom

1 Like

Thank you for your answer!! :laughing: