work.js

var works = [
  {
    title: "About Me",
    pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
  },
  {
    title: "Goals",
    pic: "http://physicist-walrus-51758.bitballoon.com/img/Louis_CK.jpg"
  },
  {
    title: "FAQ",
    pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
  },
  {
    title: "Carousel",
    pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
  }
];


//for loop
for(var i = 0; i < works.length; ++i ) {
  //jQuery selector
  $("#bojack-container").append("\
    <div class='col-sm-6 col-md-3'>\
      <a href='http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg' class='work-img'>\
        <img class='img-responsive' src='" + works[i].pic + "'>\
        <span class='info'><p class='proj-title'>Title:</p> [ABOUT ME] </span>\
      </a>\
    </div>\
    ");
  //define images variable as array of pictures
    var images = $("#bojack-container img");
    if (i % 2 === 0) {
      $(images[i]).css("border", "2px solid red");
      } else {
      $(images[i]).css("border", "20px solid brown");
      };
};


$("#bojack-container img").mouseenter( function() {
    $(".info", this).show();
  }).mouseleave(function(){
    $(".info", this).hide();
});