Text Overlay on Masonry Recent Post Images

[monipod]

Hi there.

Try as I might, I can’t get a text overlay to work over the recent photo images on the front page of my blog (http://gourmingle.com/gastromonytest/). It looks like something is stopping the text from positioning itself absolutely over the image container.

I am basing my text overlay on the method shown at: http://css-tricks.com/text-blocks-over-image/ I’d rather leave the image as part of HTML rather than force it into a background of a div but open to doing so if it’s the best work around.

I have changed the code on sf-post-formats.php accordingly but I end up with a block of accent colour over the image which can be adjusted by positioning but I can’t shake the colour. It does appear to be elongating my image area too. I set my images to be 480×500 but it’s longer than 500.

$item_figure .= ‘<div class=”textoverlay”>’;
$item_figure .= ‘‘;
$item_figure .= ‘<span>’.$post_title.'</span>’;
$item_figure .= ‘</div>’;
$item_figure .= ‘‘;

The following is the CSS I’ve added to style.css to try and get things to work and it’s the closest I got to to getting the title over the image. Any advice would be much appreciated. Thanks!

Monica

figure .textoverlay{
position:relative;
top: -200px;
}

figure h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

figure span {
color: white;
font: bold 20px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}

figure h2 span.spacer {
padding:0 5px;
}

[Cosmin – SUPPORT]

Hi,

Unfortunately our free theme support doesn’t cover fixing broken customizations, or advanced customizations like this one in general.

If you’re good with code, I suggest taking a look at how our portfolio pages add the overlay div and replicate that.

Regards,
————————————————————————————————————

Cosmin – Support

[monipod]

Hi there. Thanks but I ended up just setting the image as a background to the div. Worked fine. Sorry to bother you guys.