-1

I'm trying to add a "shade" that appears over images when the user hovers over them, but I can't seem to get it to work. When I run what I have currently, the shade fills the whole posts area, not just the one like I want it to.

Can anyone help? Thanks.

Here's the HTML that loads the post and the css for the .shade div I have set up:

.shade {
  background-color: rgba(000, 000, 000, 0);
  transition: background-color .7s linear;
  -webkit-transition: background-color .7s linear;
  -o-transition: background-color .7s linear;
  -moz-transition: background-color .7s linear;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

div.entry:hover div.shade {
  background-color: rgba(000, 000, 000, .5);
}

<div <?php post_class() ?> class="post" id="post-<?php the_ID(); ?>">
  <a href="<?php the_permalink() ?>">
    <h2><?php the_title(); ?></h2>
    <div class="entry">
      <?php the_content(); ?>
      <div class="shade"></div>
    </div>
  </a>
</div>

Wow. I just solved this, it was much easier than I thought, although I didn't really do what I meant to. I just had the post div go to 50% opacity on hover.

Ben K.
  • 11
  • 3
  • 1. Is the parent has 'position:relative' property? – Inpyo Jeon Mar 28 '16 at 07:03
  • 2. You might want to set width and height for the .shade – Inpyo Jeon Mar 28 '16 at 07:04
  • There is no image in the code provided. Regardless, what you seem to be asking for is an ***overlay*** and that has been asked *thousands* of times before on Stack Overflow. http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css/18322705#18322705 – Paulie_D Mar 28 '16 at 08:20
  • @Paulie_D I've done it before, but on a non-wordpress site. I just started using wordpress, and I can't seem to figure it out there. I did search extensively before posing this, but couldn't find anywhere where it was asked with the wordpress part. The `` part is what gathers the post content and puts it there; the image would be contained in that. I'm just trying to cover the whole post with the overlay, as I don't think I can access just the image. Thanks, though. – Ben K. Mar 29 '16 at 02:22

1 Answers1

0

You need to give height / width to the .shade to match with the height/width of the container image (.entry). As the div is empty it will be in one px line, also if it is absolute it will only take 1 pixel.

Also set position: relative to .entry

Aamir Mahmood
  • 2,704
  • 3
  • 27
  • 47
  • The height of `.entry` varies, how would I do it in that case? The post content is loaded with `` and this is what includes the image. They're not all the same size though, so setting a pixel width and height won't work. I tried setting both to 100%, but that didn't work either. @AamirMahmood – Ben K. Mar 29 '16 at 02:27