I've been struggling with this problem for a few days now. My goal is to achieve a similar effect to what is on this website:
I want to highlight a link when the mouse hovers over a thumbnail, with a transition effect. I think it has something to do with the adjacent siblings selector, but as a beginner, I haven't been able to find the right solution on stackoverflow. Here is the code I have so far:
HTML
<div class="postBoxInner"><div class="pic">
<?php
if(has_post_thumbnail()) {
//the_post_thumbnail();?>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_image_url(); ?>&h=170&w=347&zc=1" alt="<?php the_title(); ?>"/>
<?php } else {
echo '<img src="'.get_bloginfo("template_url").'/images/nothumb.jpg" alt="No Thumbnail"/>';
}?></a></div>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
And the CSS
#content .postBoxInner .pic{
border:2px solid #d8d8d8;
height:170px;
width:347px;
overflow:hidden;
}
#content .postBoxInner img {
height:171px;
width:348px;
margin:auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#content .postBoxInner img:hover{
-webkit-filter: blur(3px);
}
#content .postBox .postBoxInner h2 {
line-height:20pt;
font-size:18px;
font-family:Trebuchet MS, Arial, Tahoma, Helvetica, sans-serif;
font-weight:normal;
padding:12px 0 10px;
}
#content .postBoxInner h2 a {
color:#000000;
}
#content .postBoxInner h2 a:hover {
color:#c71515;
text-decoration:none;
}
Thank you in advance for your assistance
PS: English is not my first language, so please be patient with me :)
EDIT :
I have finally figured it out. It was indeed a simple adjacent sibling selector issue =)
#content .postBoxInner .pic {
border:2px solid #d8d8d8;
height:170px;
width:347px;
overflow:hidden;
}
#content .postBoxInner .pic:hover+h2 a {
color:#c71515;
text-decoration:none;
}