Text Overlay Effect with Flexbox

[00:00:00]
>> Okay, so the next thing I want to move on to we're gonna take a look at some figures and figure captions. I'm actually going to go back to old school relative absolute relative positioning. So what we've got going on here is we've got four very cool pictures, there they are.

[00:00:16]
And they have captions that are associated with them. So we're working with this same concept here of figures and figure captions. And as you see here, there's the figure. They're all pretty much the same. Obviously, they have different images, but there we go. There's the figure, here's our image, here's our figure caption.

[00:00:36]
And we've got a bunch of these here on the page. Now, what I'd like to do, one of the things that we often like to do with figures and figure captions like this, is we can display them like this and that is just fine, but we may like to take that figure caption and display it on top of the figure, and maybe make it a little bit transparent.

[00:00:57]
It'll be really cool kind of looking in order to do that. With Flexbox, the best way to approach this is using absolute and relative positioning. And the thing is with absolute and relative positioning, when you get taught this stuff, it's really kind of complicated, and people get very confused by the all of the absolute and relative positioning stuff that goes along with this.

[00:01:20]
And so I wanted to take the time to walk you through exactly how absolute and relative positioning works and why it works, again, in isolation rather than just sort of giving you a formula for how to do this. So this is the CSS that we have here to start with.

[00:01:38]
Basically, here's our figure, we've turned off the margin that was set by the browser. Where's our caption styling, it's basically the same stuff that you've already seen. Here's our margin. And then, here's a hack to make our images flexible. So notice that I set our images to a 100% for the width, so the way this works is that images are an inline element.

[00:02:02]
They are by default set to be as wide as the image is itself. And if you make your screen too small, you've probably seen this before. You will start to get a scroll bar on the bottom, you'll have to scroll over to see the rest of the image.

[00:02:16]
When you put a width of 100% on your images, they will expand to fill their container. And they will also shrink down proportionately. This is a very fake responsive image. This is not true responsive images. But what it does do is it lets our images flex a little bit, such that what as we're working here inside of our code pen, we get a sense of a flexible image.

[00:02:46]
And then, down here in the media queries, basically, I'm just putting these on row down, so that they don't stack on top of each other and then they go to a two by two grid like this. So a really simple layout. Okay, so the next thing that I want to do is I'm going to put it up here, right here at the top around line number seven where I've got the figure declaration.

[00:03:17]
I'm going to add to this a display of flex. How cool is that? So just by saying display flex, I've managed to put the caption next to these images. So we had them set up stacked on top of each other, which is the default behavior with figure and figure caption.

[00:03:42]
By just saying display flex, they now just appear next to each other, horizontally here in space. If you want this you can keep it, that's absolutely fine. But you can also rearrange it, somebody was asking about when to use column. Well, here's a place where it would make perfect sense, we could say our flex flow is column, no wrap.

[00:04:08]
So that's going to put our caption and our image right next to each other, stacked very nicely on top of each other, just like this. Notice there's no little space in between them that we had before with the figure caption, which is coming from the browser or somewhere.

[00:04:24]
Okay, so now for the figure caption, here's what I'm going to do just after all of the stuff that I've got here, if we said position of absolute, This is going to immediately take all of our captions and just stick them somewhere here on the page. And in this case, it happens to put it up in the upper left hand corner.

[00:04:48]
The reason why this happens is that the caption itself is going to work its way up its HTML here. We start with a caption, it's looking for some sort of element where it will eventually go all the way up to the top left hand corner of the webpage.

[00:05:10]
But by setting this up with Flexbox like this, it will go up to the upper left hand corner of the screen figure. The other way that we do this without Flexbox that you can do here as well would be to say position relative on the figure. And that will tell the absolutely positioned element where should it be absolutely positioned relative to.

[00:05:37]
If there's no relative position declared anywhere in the webpage, it will eventually wind up in the top left hand corner of your of your screen. This is why we often set position of relative first, because we're going to put it relative to that, and then we have our absolute positioning within that particular area.

[00:05:54]
So here it's gonna be within the figure boundaries where are we gonna set our absolutely positioned caption. So we need a little bit more, probably a little bit more, styling here on this figure caption. So I'm going to say the bottom is 0%, so we'll put it down there on the bottom, and we can also say the width is 100%.

[00:06:21]
So it'll stretch very nicely across our figure. And the little sizzle part would be to do something with opacity of say like 0.7. There we go. So now we can see the image coming through underneath. So now, we have a very attractive way of laying out our images here on the web page with this cool little figure.

[00:06:46]
And hopefully this also sparked some ideas for you of things that you could do with this figure caption. Right now, it's just set to stay there across all dimensions, right? It's just always gonna have this lovely figure caption on top of these things. But if you wanted, you could do something where the figure caption maybe shifts when you have a wider screen, you can take that figure caption and display it to the right or to the left of your image if you wanted to, using Flexbox instead of displaying it on top of the image.

[00:07:20]
So you have a lot of flexibility once you start looking at these in terms of micro layouts, and so sort of the giant layout of the whole web page.
>> So flex grow one evenly distributes elements. So I was just wondering if the media query scenario fitting everything on one row could be used that for the elements of the same width, instead of calculating the percentage for the flex basis.

[00:07:47]
>> Okay, all right, I understand the question a little bit better now. So it's flex grow, I had heard flex flow, and I was very confused. Flex grow as a just changing the value of flex grow as you go between various media queries. You probably could do that, but you are leaving a lot of calculation to the browser.

[00:08:06]
And so when you leave calculations to the browser, that means every browser may do their calculations slightly differently. I would think that that is probably not an approach that you would want to do for that reason. But you could certainly experiment with it. Try it across a whole bunch of different browsers.

[00:08:22]
See if you get something that you like that would be one way of thinking about it. But the flex basis methodology that I've talked about here is pretty straightforward to understand. It kinda like width, it's just a little bit different, and I think it's conceptually a little bit easier to understand than doing things with Flex grow.

[00:08:42]
>> How is figxaption with accessibility in mind?
>> Figcaption is awesome with accessibility in mind. When you start with semantically good HTML, you have a much better chance of hitting your accessibility targets here, the whole purpose of figure in Figcaptions the following. So it's to associate some sort of label the text, right, the caption associated with whatever you have inside of the figure, whether that's an image or a code snippet, or ASCII art, or whatever other craziness you wanna put in there.

[00:09:16]
And so using this semantic markup is a really wonderful way of doing that. The other thing that a figure does I haven't really talked about, when you have a figure itself, it indicates that that particular element kind of stands alone. So we could pull it out and we can put it elsewhere on the page in terms of layouts, and we're not destroying the message of the page.

[00:09:40]
So if you're using an image by itself on the page, it appears where it appears in your layout, and that's fine. But with a figure we might move it around and you can think about this back to like a textbook. So if you're reading a textbook and it says in figure one be sure to take note of blah blah blah, and you look around on the page, you may have to look aways and then you find figure one, it's labeled as figure one, right, with whatever picture it is.

[00:10:09]
It isn't necessarily right next to the text. So likewise here in HTML, your figure can move around on that page. It doesn't have to stay in one particular place.
>> This figure act as a thumbnail for the video.
>> Figure as a thumbnail for video, no, I think what you're thinking of is the poster attribute, so in the video element there is a poster attribute that will be the static image that displays on top of your video.