Jump to content

Text and a booking button appear when hover over an image

Recommended Posts

I'm wondering if it's possible to have text and a booking button appear when I hover over an image on our Team page.

Currently, we have a short bio for each team member that I'd like to show on hover. Also, it would be great if the booking widget below each esthetician could pop up or slide in the page, similar to the "Book" button in the header.

So, when an image is hovered over, the short bio and a "Book [Esthetician's Name]" button should appear with a color and light opacity background. For mobile, since there's no hover, it should work with a click instead.

Can you help me with the CSS for this?

Image not hovered.png

Image hovered.png

Link to comment
  • Replies 7
  • Views 81
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@spruceshoppe Hi! The way you have set up your current team section has several issues that make it difficult to implement the hover feature. With your current setup, you have to target each image, text block, and button separately for each team member, which would require a lot of code. Additionally, the images are not responsive and get cropped as the screen gets smaller.

If you create this section using an auto layout list section (select 'Add section' > 'People' > choose any layout), I can provide a CSS solution. We can make it look like your current design with some CSS code.

Let me know if you would like to follow this approach.

Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@spruceshoppe Great! Assuming you want it to look like how you had it initially Can you style it so there's no space between each team member? Also, how many team members are you going to have in this section? If there are at least six, please add all of them (image, text, and button). 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.