Image masked with image wrapper in Grid..
đź‘‹ Hi All,
I’ve been struggling with what I though would be a simple layout..
I am hoping to create a 2 column grid with an image that fills two columns and an image wrapper that uses “overflow: hidden; to reveal the image in just a single column..
Would be really grateful to anyone who can give some advice to help…
The CSS I’ve tried is as follows (however this doesn’t work as the image seems to follow the dimensions of the clipping “.image-wrapper”)
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr;
}
.container .image-wrapper {
grid-column: 1/2;
width: 100%;
height: 100%;
overflow: hidden;
}
.container .image-wrapper > figure {
grid-column: 1/-1;
width: 200%;
height: 100%;
object-fit: cover;
}
Desired outcome…
6 Replies
If you do
Grid-column: 1/-1';
on .image-wrapper
then it goes over both columns - I have no idea why 1/2 doesn’t do the same thing…
have a look at this video from Rachel Andrew on line based positioning: https://www.youtube.com/watch?v=t8GRS-Z3YVI
Rachel Andrew
YouTube
Grid by Example: Line-based Positioning
Part of my Grid by Example free video series. In this video I show the basics of positioning items by grid lines.
1/-1 means to span to the last explicit column. 1/2 means just one column spam from the start of column one , end at the start of column two.
So since .image-wrapper is only in one column, it’s direct children eg figure cannot break out and span two columns.
Also it looks like it’s working because of your width 200% but for grid-column declaration to work on the figure its parent needs to be a display grid.
If you look in the inspector the figures grid-col property won’t be applied because it’s parent is a block level element.
Does that make sense ?
This could also be accomplished with a background image or a mask btw
Which would simplify the markup
Amazing thanks guys, those are great tips!! 🙌