CODEWITHSUNDEEP
htmlcsswordpresshoverbackground-color
TheImaginative
TheImaginative

Reputation: 77

How to make both text and background color highlight on hover?

I am trying to create a grid style portfolio page in which the title highlights when hovered over. I would like also a background color to show over the image as well. I have created both of these but can't figure out how to have them happen at the same time. Below is the HTML and CSS as well as the link to see what I mean in action. 

.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px;  }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}


<div class="home_blog_box">
<?php } ?>
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('featured-blog'); ?></a>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div><!--//home_blog_box-->

Thanks!

Upvotes: 0

Views: 5095

Answers (1)

imjared
imjared

Reputation: 20554

You can do this nicely with the :after or :before pseudo elements: http://jsfiddle.net/TpfA8/

example:

<div class="image-box">
  <img src="http://placehold.it/200x150" />
  <p>title</p>
</div>

and relevant css:

.image-box {
  position: relative;
  overflow: hidden;
  width: 200px;
}

.image-box:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200,100,100, 0.5);
}

.image-box p {
  display: none;
}

.image-box:hover p {
 display: block;
  position: absolute;
  top: 10px;
  left; 10px;
}

Using CSS-generated content, you're creating a box around around the content of '' (nothing) but this element still adheres to the box model (sort of) so it can get things like height, width, position, etc.

Make sure to specify width for your image container so you can use the overflow: hidden; property.

Upvotes: 3

Related Questions