▼
Streaming live at 10am (PST)

Need some help with a few finsihing touches

#1

I have a few finishing touches that I would like to add in order to complete my site.

I have five did blocks at the bottom of my home page.

They have a hover effect that darkens the image and reveals some text. I would like to know how to centre that text vertically. It is fixed to to the top at the moment. Also, the fade out animation of the overlay that I have does this strange thing where it blacks out then returns to normal. I would like the fade out to be as smooth as the fade in and not go completely black.

One final question is how is the best way to go about making a 'modal' contact form. I have checked a few of the other posts but all of the links to tutorials are dead. Could somebody explain this process to me or maybe give me a link to a tutorial.

So I have three questions in total:
How can I centre the text on the Div Blocks vertically
How can I fix the fade out animation of the Div Blocks
What's the best way to go about creating a pop-up contact form 'modal'

Thank you for any help.

Here is my public share link: https://preview.webflow.com/preview/county-home-shutters?preview=f812c869389853ae32e1ec0baa6d928a

#2

Hello Charlie
Awesome site! Here are the solutions to your problem

Problem one: How can I centre the text on the Div Blocks vertically?
Solution: Try giving the div with the class name of Service Overlay Text a Padding Top of 50%. This should place it vertically in the middle.

Problem two: How can I fix the fade out animation of the Div Blocks?
Solution: Delete the background color black inside of Service Overlay and give the background color a transition too.

Problem three What's the best way to go about creating a pop-up contact form 'modal'?
Solution: Webflow has made a nice tutorial for it: https://www.youtube.com/watch?v=_C2NJniRELU.

David

#3

Thank you so much for your help David.

Very much appreciated.

Charlie

closed #4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.