/exploding-robot-head

Use position relative & absolute to make this robot head explode when hovered.

Primary LanguageCSS

summary time deliverables
Use position relative & absolute to make this robot head explode when hovered.
1 hour
1 HTML file, 1 CSS file, images

Exploding robot head

Overview

  • Fork this repository.
  • Use position and coordinates to put the robot’s head together.
  • Hovering anywhere over the robot should explode the head to reveal the brain and insides.
  • Some of the CSS is already written for you, specifically the widths of the robot pieces.
  • DO NOT change the HTML.
  • Run it through Markbot and make sure it passes all the checks.

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

Optional challenges

These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.

  1. Use the CSS transition property to make the bits animated when hovered.
    Watch this video to see how it interacts.