Masking images and overlapping effects

Design help General
1

Hi,

Just needed some help creating the desired interactions attached below.

When hovering any of the big blocks, I want the container to grow and the text to appear. I’m having two issues:

  1. Is there a way to mask images to the containers or do the images need to be cut to the perfect proportions?
  2. Is it possible for the images to change position on hover so the one selected is always on top?

normal state:

1427×942 836 KB

hover state:

1426×958 712 KB

Thanks!

2

  1. Yes by setting the dimensions on the container and instead of using an image inside, set the image as the background-image of the container, then depending on what you want, adjusting its position in the image dialog settings (first button on the top should make it for you, adjust the vertical position with the arrows.)

  2. As Z-Index is a CSS property, yes. Start by giving both your two siblings containers a z-index of 1, then select one of the container (they must share the same classname of course), select the :hover state, and change the z-index value to 2. Should work… never tested that, but should work.

2 Likes