Add Text on Image Hover

Hi there,

I'm trying to add a large about of text when a user rolls over an image on the About Us page. The idea is to roll over the headshot and their bio will display. 

I tried this but it resizes the image.

I'm wondering how I can display a large amount of text when I roll over the image. Almost like a lightbox for text idea.

Is there a way to code this? Or maybe a plugin?

Thank you

Can you share link to page where you used Image? We can help easier

It will live on this page: https://www.modernwestadvisory.com/about

I removed the code because of how it handled the image.

Thank you

On 2/5/2024 at 8:43 PM, jeffhumphreys said:

It will live on this page: https://www.modernwestadvisory.com/about

I removed the code because of how it handled the image.

Thank you

You mean hover image > Keep current text under image + add an additional text over image?

Yep! That's exactly it. Or maybe You have a better idea? I'm open to suggestions.

Thank you

On 2/7/2024 at 10:04 PM, jeffhumphreys said:

Yep! That's exactly it. Or maybe You have a better idea? I'm open to suggestions.

 

Thank you

I tried testing some code, it is possible, do you need to add an overlay over text to make text easier to read?

I have a lot of text for each person:

Jackson is the Executive Director of the Methane Emissions Leadership Alliance: an industry association composed of methane reduction technology and service providers from throughout Canada and the United States.  He is also President of Modern West Advisory, a strategic consulting firm working with the oil and gas industry, government, and clean technology providers on emission reduction and management activities. He is a partner with Carbon Connect International (with offices in Calgary, AB and Fontainebleau, France) and the Director of Aspenwood Innovation in Princeton, New Jersey. Jackson has over 14 years of experience as an oil and gas professional building carbon management and ESG strategies, collaborating with industry and government on climate change policy design, and evaluating and executing greenhouse gas emission reduction projects throughout Western Canada and the US. He graduated from Princeton University with a degree in Environmental Economics. 

If the text loaded up in a lightbox that might be cool. I'm not sure if it's possible to hover, show all that text with a vertical scroll bar.

Is there a better way to show a bunch of text on a hover?

Thank you

Text too long, it will overflow the image

You can consider using Lightbox

I created a quick example for you here

https://tuanphan.squarespace.com/hover-text-show-lightbox-1?noredirect

pass: abc

That could work great! Could we make it slightly transparent? How difficult is it to add to each image?

thank you

I am also interested in doing the same!  Or if the text is too much, to have it pop up as the lightbox when the reader clicks "read more"

18 hours ago, jeffhumphreys said:

That could work great! Could we make it slightly transparent? How difficult is it to add to each image?

thank you

11 hours ago, Meisha said:

I am also interested in doing the same!  Or if the text is too much, to have it pop up as the lightbox when the reader clicks "read more"

See this answer

Thank you!