Jump to content

Foster Template: Modifying hero image?

Recommended Posts

Site URL: http://ferret-vibraphone-l7b8.squarespace.com



I would like to make three modifications to my page (ferret-vibraphone-l7b8.squarespace.com) in the hero image area. 

1) The hero image currently is extended vertically by inserting spacer blocks over it rather than directing it to fill 100% of the vertical area on screen load, and it also oddly doesn't quite go to the edges horizontally. I'd like to resolve these issues in code.

2) I'd love to be able to add a small photo credit for the main image. Ideally this happens immediately beneath the image but could happen over the image in the lower right corner. Doing it as a text block at the top of the section beneath the hero image places it too far away, it really would need to be snug up against the image so it seems like it needs to be a modification to the hero image section.

3) Biggest issue, I would like to make the nav bar transparent but fade in opaque when it's being rolled over. This site gives a good example (https://www.tracksmith.com) although theirs is also sticky and does the slick condensing thing none of which I need. I'd simply like to be able to read the nav links over the hero image without the opaque white bar at the top, and then when rolling over the nav area, that bar fades in.



Link to comment
  • Replies 3
  • Views 339
  • Created
  • Last Reply
  • 1 month later...

Thx Tuan,

#2 just on the banner image on the homepage. Floating a 10 word text block in 11pt type in the lower right corner of the screen, over the background banner image, on load is what I'd like to do.

#3 Business Plan, a javascript solution would be great


Link to comment


This topic is now archived and is closed to further replies.

  • 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.