FREELessons: 7Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Flipping Cards

In this lesson you will create a group of cards that flip over to reveal more information whenever the user hovers over them.

Useful Links

2.5 Flipping Cards

Hello and welcome back. In this lesson, we're gonna be using bootstrap cards once again, but we're gonna do something a little bit different with them this time. With this project, you'll notice on each of these cards we're seeing a lot of content here, and what I want to do is I want to initially just see the content at the top of the card. And then when we hover over each of these individual cards, the card is going to flip over and then we'll see the content at the bottom and it's gonna be on the back of the card. Now as you can see, I've already set up all of the HTML that we're gonna need for this particular project. All that's left is to do some CSS and then some jQuery to get it working. Now, in the HTML you probably need to look over some of that a little bit because we’re using some new Bootstrap 4 classes in order to get the layout like we want it. You’ll notice in the container that I’m using the d-flex class which turn this into a flex box container. And then we’re using justify content between to spread these out along the horizontal axis. Then inside that container, we have three separate cards. And you'll notice that inside these cards, we have a div with a class of card-body which is a Bootstrap class. But we've also got another div just after that with a class of card-body-back, which is not a Bootstrap class, this a class that I have made up. And the content in side the card-body-back div is gonna be the content down here at the bottom with the second set of text, and the button. So each of these cards has a card-body div and a card-body-back div. And what we need to do is we need to position these so that they're basically in the same spot. They're gonna be one on top of the other. But we're only gonna see one at a time. And then, like I mentioned, when we hover over the card, it's gonna flip over and we'll see the other div. Now, if we jump into our CSS, you can see a little bit of what I've done so far here in the features section, which is just this entire section that contains everything. We've got this background image, which is just this wooden texture and then I have a maximum width set on each of these cards. So before we get started, I'm gonna click on the Fork button in CodePen to create a new copy of this. And in the new copy we'll get started. So I want the top section and the bottom section of each of these cards to be in the same place. So what I need to do is I need to make the card itself, I need to set its position to relative. And then these two sections here, the card body, and the card body back, we need to set those positions to absolute. And when you have an absolute element inside a relative element, then the absolute element will be placed or positioned relative to its parent. So we already have a CSS rule for the card element inside this features section. So we can also add another property here called position and set it to relative. Now before I forget, another thing I wanna do is I wanna get rid of the border on this card. So before we get any further, I'm gonna go ahead and turn off the border by setting it to none. And that just kind of cleans up the look of it a little bit, makes it look a little less fuzzy around the edges. And then for the card body and card body back classes, which again are the two sections inside the card, I wanna set the position for those to absolute. So I'm gonna create a rule for both of those at the same time. So .card-body, and then .card-body-back. And here I'm gonna set the position to a value of absolute. And you'll notice when we do that, that content gets basically stacked on top of each other. But it also kind of breaks everything else. Since that content is set to an absolute position, it's no longer holding open the background. So the background collapses upward. So let's do a little bit of sizing here. For the card itself, we've got a max-width set, I'm also gonna set a height for these. And let's try about 300 pixels for the height. And as you can see, that does stretch things out enough, at least so it seems initially. And then let's set some background colors for our card-body and card-body-back. Now I want these to be different colors, so I'm gonna create the rules separately. So for the card body, I want a background color of white. And then I'm just gonna copy this and paste it, and just change this from card-body to card-body-back. And for card-body-back, we're gonna use a different background color, I'm gonna use ff4716 which is gonna be a bright orange color, and there we go. So we can see one sitting on top of the other, and I wanna make sure that these are the same size as well. So for card-body and card-body-back, let's set the height here to the same height as the card itself, 300 pixels. And then you'll notice that our width has collapsed quite a bit on the card body and card body back. Now we've got the width set here. In fact, I'm gonna change this from max-width to just width of 220 pixels, and that already looks a lot better. Now, our height is a little too much. Let's bring that down to about 250 pixels on the .card and the .card-body and .card-body-back. And that looks a little bit better. And for the .card-body and .card-body-back, I'm also gonna set the border-radius to a value of 4 pixels. We're gonna round those corners a little bit. And that's already looking a lot better. So now we've got the back of the card on top of the front of the card. I'm also gonna copy over some styles for the button that's on the card. So I'll just scroll down to the bottom here and paste that, and that's just going to style the button a little bit. And the way we're gonna do this is we're gonna use the transform property in CSS to rotate our object around the y-axis, which is a vertical axis. So I'm basically just flipping it over like we were turning a card over on a table. And so there's actually two things we need to turn over. We need to turn over the card-body, and the card-body-back divs. And so when a particular side of the card is flipped over so that we cant see it, that rotate y property is gonna be set to 180 degrees. When we set it back to zero degrees, it's gonna be flipped over so that we can see the front of it. When each side is flipped over to zero degrees, then we're gonna actually see the particular text on that side. So what I'm gonna do is I'm gonna create a CSS class called flipped. And when the flipped class is applied to one of these two items, the card body or the card body back, then it's going to be flipped over 180 degrees. And we're not gonna be able to see the back of it. So in order to hide the back of it when it's flipped over, the way we do that, and we're gonna do this for both the card-body and card-body-back. The way we do that is we create a backface-visibility property and set it equal to hidden. That way when it's flipped over, we won't see the text in reverse, we won't see it backwards. Instead, that side of the card will just be hidden. Then I'm also gonna create a transition property so that when we switch that rotate y property, 280 from 0, it won't just flip over all at once, instead it will animate. And so let's create a transition property here for card-body and card-body-back. And we're gonna set it to the transform property. And let's set it to 0.3 seconds, so 0.3s. So now any time we change the transform property for card-body, or card-body-back, it's going to animate over the course of 0.3 seconds. So let's create another rule for both of these classes here when they have the flipped class applied to them as well. So we're gonna have .card-body.flipped, and .card-body-back.flipped. So when they are flipped over, we're gonna change the transform property, and we're gonna set rotate y to a value of 180 degrees, so 180deg. So we've got it flipped over 180 degrees, and backface-visibility is set to hidden, so when we do flip those over they should be invisible. So let's try that, let's set the back of our cards, well, let's add a class of flipped to the back of the cards, I should say. So we're gonna go into our HTML and we're gonna find all of our card-body-backs. So here's card-body-back right here, we're gonna add a class of flipped to it. And let's see if that works, sure enough it does. It disappears and we can only see the front of that card. So we're gonna do the same thing for all of the rest of our card-backs here. And that should turn them all over, and there we go. So now, let's jump into JavaScript, and let's create a mouseover function for our card. So I'm gonna point to the features section, to the card class within that features section. So any time we see a card in the features section and hover over it, then we're gonna cause something to happen. So we're gonna do a mouseover so .on and then inside parentheses and quotation marks we're gonna do mouseover. And we're gonna make a function out of this. And inside that function, let's first go ahead and just point to the card that we're hovering over. So we're gonna create a variable called $this and we're gonna set it to $this inside parentheses. And this is just a way to make your JavaScript more efficient, so it doesn't have to keep looking up this. Instead we're just looking it up once and then storing it in this variable called $this. So we're gonna find the the card body. Whenever we hover over one of these cards, we're gonna find the card body class inside that card, and we're gonna add a class of flipped to it so that it will flip over. So we're gonna say, this.find and we're looking for a class of card-body and we're going to use the addClass method in jQuery to add a class of flipped to that card. Then let's just copy this and paste it. This time we're gonna find card-body-back and we're gonna remove the class of flipped, because we want it to flip back over to the front whenever we hover the card. So let's see if that worked. We hover over it, and we see that something's happening. The front of it is flipping over, but only the text itself is disappearing, we're still seeing that white background. Well, one thing that might help is, in our CSS, let's go back to our card, and let's set our background color to transparent. And then once we do that, let's try it again, there we go. So we see that at least this part of it is working. And the reason the other part isn't working is because I put a d at the end of remove. That needs to be remove class not removed class, and there we go. Now we've got it working, that looks a lot better. So now when we move our mouse cursor away from that card, we want it to flip back over. So all we need to do is the opposite of what we've already done. And inside this mouseover event, I'm going to create a mouseout event. And this mouseout event is basically gonna do the opposite. It's gonna take the card-body and it's gonna remove the flipped class. And for the card-body-back, it's going to add the flipped class. So let's expand this out again and hover over each one. And when we move our mouse cursor away it flips back over to the front. So there we go. That's how we can create a really cool flipped card effect using Bootstrap cards. Thank you for watching and I'll see you in the next lesson.

Back to the top