Today's day number 25 we're gonna be coding up some sliding CSS three panels.

Let me show you what that looks like.

Here we go down.

In our final result, I basically just have an image.

And when you hover over that image, bam on elements slides into frame with some text.

So this one sliding from the top when you slide when you have her back out, it slides back out of the frame, sliding from the right, sliding from the bottom and sliding from ville left.

So maybe already you have some ideas of how you might want to use this.

The fact is, in CSS three, it's incredibly easy to code this up.

Typically, you'd use a plug in or you write some JavaScript urge a query to achieve this effect.

But in CSS three, like I said, it's incredibly easy.

It's slim and lightweight, and I'm gonna show you how to do that right.

And now, So up here in the sandbox, you'll see what we're gonna be working with is an image with some text above that, and we're gonna hide that text into an element.

We're gonna slide that in from the top bottom left and right over here in a code editor.

Go ahead and download 25 sliding panels and get a cute up in your favorite code editor.

And here in our index dot html, let me just show you the markup.

So you're familiar here in the sandbox.

We have a section with a Level four heading that says Slide from Top.

That doesn't really matter.

That's just telling you what each section will include.

It's this element that matters to you in here, the David, the class of slide and then slide top right, bottom and left, respectively.

Within that day, we have a different class of slide content and some texts, and then an image with the source of a placeholder image that I pulled from place.

I am g dot com, and that's a free place holder Web site.

You can use that for your own place holders.

I'm using that in this project, and again, you can put any image you want in there.

It doesn't really matter, doesn't have to be an image.

It can be content, so let's get started over here in our sandbox.

Let's start right from the top.

We're gonna say class of slide.

I'm gonna go position, relative display in line, block and overflow hidden.

That's because we want that elements on the inside of slide to be out of you when it's not within that frame.

And now we're gonna say slide and then image we're gonna say display in line block.

This one's gonna be vertical align middle, and that's going to align that image within the middle of the element.

If you're uncertain about how a style works, whether in this video or any of the videos or just in your projects, take it out.

Reverse engineer the work that you create.

So if you don't know what this specific property does, then remove it and see how it effects the output and then added back in, modify the values and see an experiment.

That's how I learned as a Web developer as I started building more more projects.

So and that's how I encourage you to also learn how to understand CSS properties and values.

Okay, vertical line Middle.

Now we're gonna jump in and maybe let's just see what that looks like if it does anything, so over here, in our final result in the sandbox, Rather, you're going to see that it doesn't actually do anything so far because we're not telling it to do anything specific.

We're not actually modifying it too much.

But let's move on to the class of slide dash content and we're gonna say position absolute, because we're gonna move that content.

The content is that pink box that's gonna slide in and out or is a top zero left zero right zero and bottom zero.

So it's stress, So they're all anchored.

So each side is anchored to every respective side.

If that makes sense with for 100% height 100% we just want to make this expand to the full size of its parent element slide.

And now what we want to do is give it a set index of one.

So it's just in front of everything we're going to use flex box here, display flex A line items.

This is a flex box property flex bucks based properties.

We're gonna line the items center, justify the content center and then textile line center just covering our bases here I see this looks like so far.

Look at this.

So this is what it's starting to look like.

It's dead center fire to remove the last few properties here.

Maybe even if I took out display flexes.

Well, let me take all of this out.

So there we go.

You can't really see any change when I take out flex.

But watch if I took flex out and tried a line item center, it's not going to do that.

It's not going to vertically aligned that.

But if I go display, flex those that a line items is now gonna work nice, I like it.

Typically in the past, you have to make it display table and then have another element within there that says Display table cell and then vertical line middle.

But this is way more lean using flex box, and it's better.

It's better to use flex box rather than trying to go back to old school CSS table technology.

Our rights, especially the stables, are used for data.

Where's flex boxes specifically for visual modification?

All right, now let's keep going, and I'm gonna say padding on, uh, whoops.

I want to stay in slide content.

I want to give it a background color action.

I want to see.

I want to see that background pink color.

So to 25 comma 35 69 0.9 a little bit to see through.

And then we're gonna give it a padding of 20 pixels so that it doesn't over.

So doesn't go out into the edge of the parent, the text color to be white.

And I want to give it a box size box sizing of border box because that padding I don't wanna have it be 100% wide, plus 20 pixels.

I just wanted to be 100% and the padding within it I write transition, transform 0.3 seconds and then ease.

So that's going to transition to transform property that we that we did we add transform property yet?

No, But we will upon hover.

So save that.

Let's check it out.

So now we've got that style.

It looks good.

But now what I wanna do is hide it and then have it slide in when I hover.

So let's make that happen.

So now I'm gonna say, slide, hover, and then I want to say slide dash content.

So now I'm gonna do is they transform translate And the translate value allows us to position where we want to see this animation So zero and zero Now what that means is upon hover I wanted to go to zero and zero that's X and Y But here, let's say directions now I don't want to do is say slide dash top and then slide dash contents from specifically styling the slide top element here and I'm going to say transform, translate.

So this is my default.

This is not on hover.

I'm specifically targeting each, uh each element.

Now I want to translate zero and negative 100% save that that's gonna move it up 100% of its size, its height.

So now there we go slide from top.

You don't see the element.

You just see the image of the cat hover slides down just like that.

Why do we use translate?

Because the animation is much more smooth that goes by points of pixels rather like fractions of pixels rather than one pixel to pixel three pixel.

And it's a lot smoother oven animation, especially when you have like a retina screen and you have really high.

Ah, really nice video card and all of that sort of stuff.

Using translators better for animations versus using position for animation.

So maybe we can have a look at that.

Let me make this animation go really, really slow.

10 seconds.

Let's see what that does.

So very, very smooth.

I don't even see any clunks at all.

Now, if I were to use, let's say Instead of transforms, let's hide this.

And let's just use something like top negative 100%.

And then if I go top, actually, this would be negative 100% and this one will be zero and take transition.

Let's go all so I can already see chunks.

You might not see it in the recording.

I've got a retina screen.

Um, and it's a really large monitor, so I can actually see.

I can see the clunkiness if you made this go slower, like, really, really slow.

Something like 100 seconds.

We're not gonna wait that long and then checked it out.

You're literally going to see it go down in.

You can actually see that.

See, I was going down.

It's just that that's what the animation is actually doing if you're using top or the position that position property, so we're actually going to change this, too.

Let's go back to translate and see if that actually makes a difference, and I'm gonna uncommon thes remove this.

This is actually transform Kate.

Now let's check it out.

Amazing difference Proof is in the pudding right here, so you can now see how that is literally sliding down like liquid, even if it's if it's a slow animation.

Maybe you're animating a scene of elements like a background scene of clouds and a mountain and Mario running across the screen or something you would use transform and translate, because that's going to slowly smooth.

It's going too smooth animation.

Where is when you use the top or bottom or left rights and use pixel values or percent valued values?

It's gonna be a clunky animation.

This is just sliding down just super smooth.

So that is proof right there.

Why you'd want to use transform, translate for or any other proper translate.

Three D Translate why, in all these sorts of things, these values for animations, because it's very clear the difference in the animation.

So let's put that back.

Does your 0.3 seconds save that?

Bam!

It's just nice.

Really?

Like in this.

Okay, so now all we gotta dio is just going to copy this, pasted a few more times, change the value from slide top to slide rights and then slide bottom and then slide left.

And then you guessed it already is changing these values.

So slight Top is fine.

We want to change slide right to x value, negative 100%.

And the Y value would be zero.

And then, if you want it, slide bottom, We're gonna do, um, and not see here.

We're gonna go zero and 100%.

And I was wrong here.

So side right is actually 100% that way to the right and then bottom.

It's 100% down, so I'd left will be negative.

Let me see the negative 100% on the X and the zero on the Why save that.

Let's see if all of these work now we got side from right.

Beautiful slide from bottom.

Perfect side from left.

Awesome.

And what if you wanted to slide from the top.

Left top, right, bottom left or the bottom, right.

You'd simply let's just use one of these, For example, Um, we're gonna use just this one.

I'm gonna say 100% and negative 100%.

Let's see what that does.

That's the slide left.

See how it's coming from the top left.

That's what is happening there.

You just have to change these translate values.

The X and Y.

We're gonna switch that back and there we go.

Slide left, bottom right and top.

There we go.

There are sliding content panels with CSS three thes air.

Incredibly useful.

You can use them for displaying your service, says portfolio pieces.

Let's say you're showing a picture of your portfolio and when you hover over it, content panel slides in displays, the title and a button to click here.

Maybe displaying a product you're selling something that's the price comes in with the call to action to purchase whatever it is that you want to do.

Using these sliding condom panels, they're incredibly versatile.

I highly recommend you use these in your own projects, and as you can see, the CSS is way, way, way easy you don't need any plug ins or any JavaScript.

Urge a query plane.

Bonilla straight up, CSS three.

So thanks for joining me today in Dana between five.

See you tomorrow.

We're closing in on the home stretch here.

Day 26 coming up.