Hi all - under the hero section ofthis website http://www.fordbrook.com/ is a very smart box which links to their case-studies of the site. I am struggling to replicate this design in Webflow, can anyone help?
Thank you
Here is my public share link: LINK
(how to access public share link)
Hi @Roxzfr, your public link doesn’t seem to be working.
What part are you struggling with? Is it the rollover interaction or the actual layout. Are you trying to get one column over two columns?
Jeff
https://preview.webflow.com/preview/creative-d8cfff?preview=ad88e49aa06e64889308c61dbe2e53c2
Hi Jeff,
The layout more than anything. I’ve added the link to the site I am designing above (the images etc are all place holders to give me something to work with. This is the first time I have needed to produce something like this in Webflow so I would appreciate any help. Yes I used two rows one on top of the other as I intend to have text on the right. Do you think there is a more elegant solution?
Hi @Roxzfr
I see what you are doing here. You have an image inside a div, but you want to actually make the image the background of a div and then overlay a color tinted “link block” (div) over that with the text inside that Wedding Div.
I’m not explaining it very well… I can post more detailed instructions with images later today when I have more time after work.
JFly
Thanks @jeff - now you have said it all of a sudden it is completely obvious! trust me to over-complicate it. Thank you so much @sabanna for the video - very helpful. 
Good morning @sabanna I really thought I had followed the steps to the letter; however, my image doesn’t fill the row and Webflow tells me I can’t copy the link block to the row underneath wedding. I am so sorry tio be a pain, but could you take a look and let me know what I have done wrong please? https://preview.webflow.com/preview/creative-d8cfff?preview=ad88e49aa06e64889308c61dbe2e53c2
Thank you so much
Good Morning @Roxzfr
It seems that you need to explicitly set the padding on the column div to “0” on the left and right. Even though it looks like it is already set to 0, click on each left and right padding value for Showcase Row 1 and make it 0. (See padding Image)
As for the second part of that, I was able to copy the and paste the “Swowcase Wed Link” and paste it below the other. Just be sure that you have the ourter div “Showcase Row 1” selected when you do. You could also just create another row div and give it two colums, then add your link blocks to each.
Hope that helps you. Keep us posted!
JFly
Glad to see you figured it out, guys 
Hey @Roxzfr
FYI - I just noticed that your background images are repeating within the div at smaller tablet and mobile sizes. Unless this is intended be sure to check your background image settings and . See image
Thanks @JFly. It isn’t intend so hank you for the heads up. I try to get the desk-top right before I worry about anything else!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
