How to expand a (what looks like a grid) item background image on hover?

Design help Animations & Interactions
1

I came across this interaction on a website and found it quite cool. However, I cant figure out a way to replicate it. Recorded GIF below:

massive-gif

I was able to use box sizing to expand entire grid items on hover, but not just the background image to stretch across the grid on hover (like in the attached GIF).

Anyone know how to do this? Thanks!

2

hi @MuseOnline_Co in coding is always several ways to get identical result. If you would like to know how this is structured use browser Dev Tool to investigate what and how.

3

Hi. Thanks for responding! I did actually try to inspect it through the Dev Tool. Are you saying that there is no way to accomplish this without code? Because a no-code solution is what I was looking for.

Thanks again!

4

I do not know as I can’t check original page and gif doesn’t means anything to me.

The best way to get help is to follow the forum post guide.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName
5

@Stan Thanks for pointing that out. Here is the live link to the website I am referring: https://engagemassive.com/

The section of interest is the Services section a bit down the page.

Thank you.

6

Thats correct @MuseOnline_Co

Maybe you may build some alternative but not to close to this in “no-code” paradigm but … take it as some inspiration and come up with your version.

7

I see. Thank you for clearing that up for me.