Question

I have a loop that outputs a bunch of boxes with masonry containing post excerpts.

<div class="box">
  <div class="image">
     <img src="" />
  </div>
  <div class="info">
      <h3>//title output with php</h3>
  </div>
</div>

.image {
   position:relative;
   width:200px;
   height:200px;
   z-index:100;
}
.box:hover .image {
   margin-top:-30px;
}
.info {
   position:absolute;
   bottom:0;
   width:100%;
   z-index:99;
}

Ok so what I have here is a div containing the thumb for the post and then a div that I hide under it that contains the title. To reveal the title I give .image a negative top margin but my problem is that .info varies in height. So I need to grab the height of each .info with jquery on page load and then use that to set the negative margin-top of each corresponding .image.

Something like this but obviously this isn’t right.

 function pageLoad() {
   var height = $(".info").height();
   $(".box:hover .image").css("margin-top", height );
 }

So how can I do this for each individual box in the loop?

Answer 1

This may be what your looking for.

$(document).ready(function () {
    $('.box').each(function () {
         var height = $(this).children('.info').height();
         $(this).children('.image').css('margin-top', height);
    });
});

I did not see the hover part before, maybe your looking something more like this:

$(document).ready(function () {
    $('.box').hover(function () {
        var height = $(this).children('.info').height();
        $(this).children('.image').css('margin-top', height);
    });
});