I'm building a wordpress blog and right now on the main page i got the posts picture and on every picture there's a black block hlaf transparent with the post title on it.
What i want to accomplish is that when i hover the post img the black block and the h1 txt appears. I'm new to css and what i couldn't understand is how can i code in css something like
If hover over .post-img show .image .text.
I've read about Conditional-CSS but couldn't find an answer. I've attached the pieces of code i thought relevant for my issue.
Question
Shasoosh
I'm building a wordpress blog and right now on the main page i got the posts picture and on every picture there's a black block hlaf transparent with the post title on it.
What i want to accomplish is that when i hover the post img the black block and the h1 txt appears. I'm new to css and what i couldn't understand is how can i code in css something like
If hover over .post-img show .image .text.
I've read about Conditional-CSS but couldn't find an answer. I've attached the pieces of code i thought relevant for my issue.
Thanks
index.php:
<div class="image"> <div class="text"> <p><h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> </p> </div> </div>style.css:
.image{ position:relative; float:left; /* optional */ } .image .text { background-color:black; filter: alpha(opacity=50); opacity:0.5; position:absolute; top:145px; /* in conjunction with left property, decides the text position */ left:0px; width:309px; /* optional, though better have one */ height: 52px; } .post-img { padding: 5px; clear: both; width: auto; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; background-color: #E6E6E6; height: 181px; text-align: center; border: 1px solid #D5D5D5; overflow: hidden; } .post-meta h1 a { margin-right: 13px; margin-top: -5px; color: #FFFFFF; text-decoration: none; font-weight: bold; display: block; }Link to comment
Share on other sites
15 answers to this question
Recommended Posts