objects in the work array

scripts.js

// work section
  for(var i = 0; i < works.length; ++i ) {
    $('#work').append('\
      <div class="col-xs-6 col-md-3"> \
        <a href="'+ works[i].url +'" class="work-img">\
          <img class="img-responsive" src="' + works[i].pic + '">\
          <span class="info"><p class="proj-title">Title:</p>"'+ works[i].title +'"</span>\
        </a> \
      </div> \
      ');
    var images = $('#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();
    }).mouseleave(function(){
      $(".info", this).hide();
    });

style.css

/*WORK STYLING*/

#work h2 {
	text-align: center;
	margin-top: 200px;
}

.work-img {
  display: block; /* needed to center the element with margin */
  margin: auto; /* center the image inside the column if it's smaller */
  max-width: 200px; /* needs to be set to the width of your image files if they are relatively small */
  position: relative; /* is needed for .info position: absolute to work */
}
.info {
  position: absolute; /* let's us move the text around and not worry about the image */
  top: 15%; /* position the text 15% away from the top */
  left: 22%;
  color:#fff;
  font-family:Futura;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:0.5em;
  line-height:1.6;
  display: none;

}
.proj-title {
  font-weight:100;
}

work.js

var works = [
{
	title: "ediblehood",
	pic: "img/ediblehoodhome.jpg",
	url: "https://ediblehood-062016.herokuapp.com/"
},
{
	title: "about ediblehood",
	pic: "img/aboutediblehood.jpg",
	url: "https://ediblehood-062016.herokuapp.com/static_pages/about"
},
{
	title: "interactive map",
	pic: "img/locations.jpg",
	url: "https://ediblehood-062016.herokuapp.com/locations"
},
{
	title: "add your project location",
	pic: "img/addlocation.jpg",
	url: "https://ediblehood-062016.herokuapp.com/locations/new"
},
{
	title: "info marker",
	pic: "img/pumpkinediblehood.jpg",
	url: "https://ediblehood-062016.herokuapp.com/locations"
},
{
	title: "about kaja",
	pic: "img/aboutkaja.jpg",
	url: "http://kaja.bitballoon.com/#about"
},
{
	title: "carousel",
	pic: "img/magicofcoding.png",
	url: "http://kaja.bitballoon.com/"
},
{
	title: "working",
	pic: "img/working.jpg",
	url: "https://github.com/kajatiger"
}
];