On my site here, You can see that I’m trying to display the titles over the thumbnails and the orange background is translucent but the title is also inheriting the opacity property from the CSS.
The issue is that I can’t make one element opaque and the other translucent.
Is there any way I can assign a different class to the title of the posts?
I’m using the below php code in index.php to display these posts like this:
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<div id="welcome">
<h1>HELLO</h1>
<p>Fusion Media offer a range of media services within the sport of cycling.</p><p>Wherever you look, more and more people are finding cycling an inclusive platform to reach the new breed of health-conscious, weekend-adventurers.</p> <p><strong>Whatever you need to achieve resonance with that group,</p><p>Fusion Media has you covered.</strong></p>
</br>
<p><h1>LATEST NEWS</h1></p>
</br>
</div>
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php query_posts('cat=4&showposts='.get_option('posts_per_page')); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post-thumb-title">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(632,305));?></a>
<p class="thumb-title"><?php the_title(); ?></p>
</div>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
<?php endif; ?>
<div id="welcome">
<p><h1><a href="/latest-news/">MORE NEWS...</a></h1></p>
</br>
</div>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And this is the CSS for the div:
div.post-thumb-title p.thumb-title {
margin: 0;
height: 2em;
line-height: 2;
position: relative;
top: -2.5em;
max-width: 100%;
text-align: center;
color: #000;
background: #DF7106;
font-family: 'dinregular';
font-size: 22px;
left: -65px;
opacity:0.7 !important;
filter:alpha(opacity=40);
}
Thanks
You should use
rgba
or a png to achieve this effect.opacity
is annoying because it affects all child elements and anything within that element too, and can’t be over ridden on child elements.Using rgba would produce results like so (I’ve removed the image on one of them to show the text is NOT transparent).
Why not set:
If the
p
is getting grouped with the styles for the thumb-title class it is going to get the same opacity.