Streaming live at 10am (PST)

Square columns, multiple image hover effects


#1

Hello the good people of Webflow,

I'm trying to recreate the effect from the footer of this website:
http://www.hugeinc.com/case-study/payu

I'd like to replicate the "More Work" section at the bottom of the page. Specifically:

  • 3 Square columns
  • On hover: Image zooms in, color overlay eases in, text eases in from large to medium.

I've been trying to achieve this for the last hour but it's very tricky. I can't seem to get the columns to stay square, and the hover effect isn't quite the same. @cyberdave maybe you could help? :slightly_smiling:

Thanks in advance!


#2

Hello, @Clarinta.

Let me try to help you :slightly_smiling:

First of all, have to notice, that on the site-example they used fixed size for the "squares" (425x400 for big desktop and 319x319 for smaller devices).

If you want to make that squares responsive, I would suggest set top or bottom padding for every column in 33.3% (equal its width). In this case, for adding some content inside the column you will have to use div with position: absolute inside the every column and make them align:full. Then, you can add all content you need inside the div and it will not affect columns size.

Cheers,
Anna


#3

Hi Sabanna,

Can you provide a short video on how to achieve this?

Cheers,
Clarinta


#4

Hi, @Clarinta

Here is a video how to make square columns and set divs for content inside it:


#5

Thank you so much @sabanna! Appreciate your help :slightly_smiling:


#6

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