hi - i’m running into what i would assume is a fairly simple issue (i’m a newb). essentially, i’m trying to create tiles with images (4 images evenly distributed within tiles) - where the images are larger than the parent div block that it sits within. so that it you only see a portion of the image, and the div wrapper cuts off the overflow. is there anyone who can point me in the right direction?
I’m guessing you want one image on top of the other.
If so, just make your Div background an image rather than a color. Then play with the inside padding of said Div.
@TheCat thanks so much for the reply! and apologies, including screenshots this time for hopefully a better explanation.
1/ i’m essentially trying to achieve the screenshot below. where i have 4 even width tiles, side by side, of cropped parts of the images (where each tile shows a sliver of the image).
2/ then i would like to add an interaction, where when i hover over one of the images, the width expands/opens in relation to the others. in the screenshot below, i would be hovering over the SF bridge image which then expands like an accordion effect
Hi! As @TheCat said above, the way to go is first focusing on the divs and not the images.
Make the 4 divs on the desired sizes/layout, and then apply to each the desired photo as a background image (cover and centered as configuration). This way you should get the evenly distributed images.
After that you will have to work on the interactions (on hover, expand the desired div).
I did the same thing on a project of mine. As @brunocorreia mentioned, create div’s for each container you want. I set background images within each one with height values of 100%. Then set the div width to something like 25% of the parent container. Use the hover state to change the width value of the div to something like 45%. Then adding a transition to the width values will accomplish the effect you’re looking for!
@brunocorreia@Hunter_Reynolds thank you guys so much! exactly what i was looking for. i was able to get it to work this weekend based on your tips. saved me a ton of time/misery - appreciate you guys!
