WELP!
i can make this layout using flexbox and wrap it? BUT how do i write on the images like "soccerVR" its written on the image
11 Replies
To do this you will need an extra element.
I would suggest that you wrap the elements in their own individual container and either add an element to hold the text .
This text element would have
position: absolute; to place this text where you need it within the image container element (which will need position:relative; for this to work).
Seeing as they are images, one option for the image container would be figure and then use figcaption to hold the text.wont that affect responsivevess?
I can't think of any reason why it would.
However without seeing your specific code it is hard to know if there may be any further implications.
If you don’t want to use position absolute for some reason you could achieve the same result using grid.
Give each image container the grid property and define 2 rows.
Make the image span both rows.
Place the text in the second row, over the image.
If the images are decorative and you don't need an alt tag, you could also use background images and then just the text inside the parent.
Bg images can be fiddly too, I like Chris figure and figcaption suggestion best
I have updated my codepen to show both of my suggested methods, absolute positioning and grid. There are, of course, other ways to achieve this.
lemme try that figcaption idea
thats one way but i want to give a gradient to the image as well so if i use this methos the written stuff will also be affected by the gradient
No necessarily as you can have more than one bg image or use a pseudo element.
Just informing of options, go with what's best for your project
thats an excellent idea but i cant seem to understand this topic yet its just so complicated for me
With the grid method you do the following....
For the parent (figure):
- Set it to use grid with
display: grid;
- Define 2 rows with grid-template-rows: 1fr 1fr; (1fr = 1 fraction so, in this case, the rows will have equal heights).
That will basically set it up so that, by default, it will place each of its children in a separate row (as we haven't defined any columns).
On the child element (figcaption)we define in which row we want the element to be placed.
We want the images to take up the entire space (i.e. both rows) so we tell it to start from row 1 and finish when it reaches row 3 (which we haven't actually defined).
The shorthand for this is grid-row: 1 / 3;, however, as you will see in my code, I actually used grid-row: 1 / -1; rather than "3" . The use of "-1" is a trick to simply tell the element to expand across all of the rows (or columns), this way you don't have to define the last row, this automatically tells it span them all.
For the caption we tell it to start in the second row with grid-row: 2. In this case we don't need to tell it how many rows to span as the default is 1 which is what we want.
Note - if we don't tell it specifically where to start, the browser will automatically add another row as it sees that both of the first 2 rows already have content.
For both of the elements I have also told them to be in column 1 using grid-column: 1;. This ensures that the browser doesn't add more columns.
Finally, for the caption text I have added align-self: end;. This just pushes the element to the end (bottom in this case) of the cell.