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?
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.
