Foster Template: Modifying hero image?

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

Hello

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.

Resolved #1 with settings in the design panel. Appreciate any help on #2 and most importantly #3.

#2. All images on your site or banner image on homepage?

#3. This will require JavaScript code. Do/will you use Personal or Business Plan?

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