I am working on a loop that generates multiple boxes with masonry layout 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;
}
My current challenge is to dynamically adjust the negative top margin of each box's image based on the height of its corresponding info section. I attempted a jQuery solution as shown below but it does not work for individual boxes within the loop:
function pageLoad() {
var height = $(".info").height();
$(".box:hover .image").css("margin-top", height );
}
How can I modify this script to target and adjust the margin for each box separately in the loop?