0

I would like to display the title with opaque background above the images on a frontpage.php. I am able to display the title on top with margin:-#, and can add a transparent background with z-index and rgb opacity, but I'm sort of stumped on how to get different lengths (heights) of titles to all just occupy the bottom of the images neatly. Since I'm just using margin-minus to pull the titles up, they're sometimes in the middle of the image, sometimes too long, etc.

Has anyone got a fix for this? I'd like to have the titles at the bottom of the image, but on top of the image.

My css at the moment is:

div.first-post {
    margin:10px; 
    float:left; 
    width:41%; 
    height:auto; 
    background-color:blue;
}
div.headline-container {
    margin-top:-50%; 
    background:transparent; 
    position:relative; z-index:2;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/     
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

for:

 <div class="first-post">
     <div class="first-container">
         <a href="<?php the_permalink() ?>" >
         <?php if ( has_post_thumbnail()) : the_post_thumbnail('columner-thumb'); endif; ?>
             <div class="headline-container">
                <?php the_title(); ?>
             </div>
         </a>
     </div>
 </div>
1
.first-container {
    position: relative;
}

div.headline-container {
position: absolute; /*Changed from relative to absolute.*/
bottom: 0;
color: #ffffff; /*Keep other style rules you have*/
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.