careerfoundry module 4 exercise 4

progress-work.js

var works = [
  {
    title: "First Project",
    pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg"
  },
  {
    title: "Second Project",
    pic: "img/silver_kitten.jpg"
  },
  {
    title: "Third Project",
    pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg"
  },
  {
    title: "Fourth Project",
    pic: "img/silver_kitten.jpg"
  } 
];

$('#work').append('\
  <div class="container progress-work">\
    <div class="header">\
      <h2>Progress work</h2>\
    </div>\
    <div class="row">\
    </div> \
  </div> \
');  

for(var i=0; i<works.length; i++) {
  $('.progress-work .row').append('\
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">\
      <a href="' + works[i].pic + '" class="work-img">\
        <img class="img-responsive" src="' + works[i].pic + '" alt="">\
        <div class="info">\
          <p class="proj-title proj-description">Title:</p>\
          <p class="proj-description">' + works[i].title + '</p>\
        </div>\
      </a>\
    </div>\
  ');
  var images = $(".progress-work img");
  if(i%2 === 0){
    $(images[i]).css("border", "2px solid DodgerBlue");
  } else {
    $(images[i]).css("border", "2px solid salmon");
  };
};

$('.work-img').mouseenter(function() {
  //console.log(this);
  $('.info', this).show(); // select class info in the anchor which is 'this' and show it 
}).mouseleave(function() {
  $('.info', this).hide();
});