DJ CSS

Bob Ziroll -

We'll be beefing up our original DJ JS. (You'll still need to make this from scratch).

This time around, we won't be focusing on javascript event listeners though. Instead, every event will happen on hover, which you can just use the CSS :hover pseudo-selector for. In other words, no JavaScript file required this time.

Also, instead of one main box, you'll make 6 smaller boxes. Each one, when hovered, should change 2 or 3 different properties of the box that was hovered.

You get to choose which properties change, but try to vary it between each box. Here's a non-exhaustive list of something you could change about each box:

  • Background color
  • Border (width, color, style)
  • Border radius (can target each corner individually if you want)
  • Box shadow
  • Height/width
  • Margin/padding (put some text inside to better see what's happening)
  • Position
  • Opacity

ALSO, you must make each box smoothly transition from one style to another. (This is a CSS transitions practice, after all).

Extra Credit

Learn about the HTML5 <audio> tag and insert some music to play in the background. It's just like you're in the club!

Have fun, and experiment with CSS transitions!