There’s been a huge advancement in the capabilities of CSS with the introduction of CSS3, and we’re seeing a lot of projects already using the new features. Today, we’ll combine a few of the new features we’ve learned thus far to create a dialogue box that pops up and displays more information about a link in our page. We’ll come across some transitions, some shadows, and even some rounded corners. Are you ready? Let’s go!

STEP ONE:

The HTML

We’ve tried to keep the HTML as semantic as possible, while still making it accessible enough to accomplish our goal.

  1. We set up a “wrapper” for our links called “awesomeLinks”. This will help us to keep all of the elements together and easily positional.
  2. Inside of the “awesomeLinks” wrapper, we create an unordered list to hold each of our Divs as list items.
  3. In each list item we set up a link to the Ninja and a Div below it to hold the details.

The goal is to be able to hover over a link, and have a popup show us the details about the ninja we are hovering over. Now, we can go ahead and start adding some CSS.

STEP TWO:

The CSS

First, we need to have some basic CSS to get us started on our way. Our basic CSS will position our “awesomeLinks” wrapper near the center of the screen, slightly increase the font size, and remove the default list item decorations. We’ll also lay the links out horizontally at this point. Here’s what our initial CSS looks like, note that we’ll be adding much more:

Go ahead and load the page up in your browser so you can see where we’re beginning. All you should have is the three links layered out horizontally at about center screen and the detail text below each link.

STEP THREE:

Styling the Pop-Up Dialogue

Our popup box is going to have much of the attention in or CSS file, so it’s probably best we start there. Have a look at the styling and then I’ll explain in detail what’s going on:

Now, all you should be able to see on the page are the links to each Ninja’s details.
Before we can start our transitions, we’ll want to make sure that our Pop-Ups work without them. This means we’ll need to setup a :hover pseudo-class to help us accomplish this. When a user hovers over a link, we’ll need to make the Pop-Up visible again, and then move it so it sits above the link. Have a look at our :hover pseudo-class:

Now, when we hover near one of the list items, we’ll see our Pop-Up appear above the link that we’re over top of.

The final step is to add the transitioning effect. Recall that in CSS3, to create a transition we need to specify how long we’d like the transition to take, as well as the type of transition. Here’s how to change the popUp Class to reflect our new transitions:

NOTE: We’ve only included the webkit version.

Now, go ahead and view the page in a browser so you can bask in the wonderful glory of CSS3. The Pop-Ups are finished, and took very little CSS and absolutely no JavaScript.
Final Result

As you can see, CSS3 has moved the old version of CSS into a whole different level. Just so you’re aware, what you’ve just created used to take far more effort. Be sure to get familiar with the rounded corners, shadows, and transitions as you’re sure to see more use of these properties as the internet continues to progress. Join us next time to learn how to make some more cool CSS3 projects. See you then!

DownloadCSS PopUp Dialogue Boxes Source Files