Jump to content

Add Text on Image Hover

Recommended Posts

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

Link to comment
  • Replies 11
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.thumb.png.a9e940fade967e69b10ff7e2072e09da.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.thumb.png.8ff86f0100f970c9b85fef53dda8d86f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 StatesHe 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

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.