title: adding mouseover event to masonry
body: <p>This may be an easy answer, but I'm having trouble finding much on it.</p>
  
  <p>I'm using the masonry plugin to populate a page with images. The images are works of art. I'd like the artist's name to slide up from the bottom when you mouse over an image of his/her work.</p>
  
  <p>Right now I'm just trying to get a mouseover event to work, but nothing is happening. Can anyone help, please?</p>
  
  <pre><code>$(document).ready(function(){
  
  
  $.get("artists.json", function(data){
  
      json = $.parseJSON(data);
  
      $.each(json, function(i, data){
  
              $("#container").append("&lt;div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" caption = '"+data.artistName+"' &gt;&lt;/div&gt;");
  
  
  
      });
  
  });
  
  $("#container").imagesLoaded( function(){
      setTimeout(function()
      {
          $('#container').masonry({
              itemSelector : '.thumbnail',
              gutterWidth: 0,
              isAnimated: true
          });
  
          $("#container").css('visibility','visible').hide().fadeIn('slow', function(){setTimeout(function(){ checkURL();},500)});
  
      },1200)
  
  
  
  });
  
  
  $(document).on("mouseover", ".thumbnail.small", function(){
  
          //console.log($(this));
          $(this).css('width:', '110%');
  });
  </code></pre>