How to Build a row like on AC MILAN Page and make it responsive

Hey Guys,

Here is the link to the original Site of AC MILAN https://www.acmilan.com/en
Here is my Page that I am Building on http://salvo-newton-spotify.webflow.io/

If you scroll down to AC Milan’s Page next to the Shop Section you#ll find 3 Pictures, which are acutally link boxes (I guess) that have an effect on hover… I’ve tried to do that myself, but I cannot get it. Anyone here that can help me?

Plus if you see the responsive version of it?
Would you use flexbox?? I need help please…


Here is my public share link: LINK
(how to access public share link)

1 Like

For your first question, you already seem to have a colour overlay on hover, so you’re just wanting the transition effect? If so, select your element, then transitions and background colour. Set the time you want it to take for the animation to complete.

Second question: I’d use columns and set them to sit vertically on mobile

1 Like

Thank you for your answer…
Yes I allready have a hover effect, but I can’t manage to get the headings centred within it.
I’d like the headings to appear with the colour overlay. Just don’t get, sorry.

1 Like

No problem, I see what you’re looking for now.

The AC Milan site uses divs set to Flex Box (Vertical) with the “align-items” set to flex-end and a background image.

Your divs are set up fine so far so all you need to do is change them to flex-end and add your content.

Hopefully that makes sense!

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