Edit in JSFiddle

Result
JavaScript
HTML
CSS

var button = document.getElementById("my-button");

button.addEventListener("click", function() {
  var minion= document.getElementById('minion');
  minion.style.display="block";
  alert("Can you make the minon dance?");
  });

document.getElementById("minion").addEventListener("mouseover", mouseOver);
document.getElementById("minion").addEventListener("mouseout", mouseOut);

function mouseOver(){
 document.getElementById("minion").style.width="125px";
}

function mouseOut() {
 document.getElementById("minion").style.width="100px";
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Skillcrush 102 - Fun With JavaScript Events" />
  <title>Fun With JavaScript Events</title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
  
<body>
  <div id=main>
    <h1>Ever wonder what would happen if you clicked this button?</h1>
    <h2>Now is your chance!</h2>
    <button id="my-button">Click Here for a Smile</button>
    <img id=minion src="https://yt3.ggpht.com/-VCWP-meZvJM/AAAAAAAAAAI/AAAAAAAAAAA/85TkyvuWYQU/s900-c-k-no/photo.jpg" alt="Minon"/>
   <div>
</body>
</html>

h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  color: #1abc9c;
  text-align: center;
}

h2 {
  font-family: 'Roboto', sans-serif;  
  font-size: 14px;
  color: #16a085;
  text-align: center;
}

#my-button {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  display: block;
  margin: auto;  
}

#minion {
  width: 100px;
  display: none;
  margin: auto;
  padding: 10px;
}