Add a very basic color overlay with text

Question

I am looking for some advice on how to add rollover effect to my WordPress post images. Now the image are pulled in and set as background images so It makes it tricky for me. Here is my code:

<div class="portfolio-image" style="background: url(<?php echo $src[0]; ?> ); background-size: cover;">


    <h2 style="margin:0; padding: 0;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

            <?php echo get_the_tag_list('<p> | ','&nbsp;&nbsp; | ','</p>'); ?>

    </div>

.portfolio-image{width: 324px; height: 280px; background-repeat:no-repeat; box-sizing: border-box; border:2px solid #fff; padding: 20px; float: left;}

Now I tried wrapping the div and applying a hover effect to that div but it reverses what I want so it hovers over and show my post image. what I need it to do is show the image as normal but when you hover over the image the image darkens and the title to appear over the top. really struggling to figure it out as it is a background image.

Answer 1

You can do this without additional markup by using a pseudo element as the overlay color.

.portfolio-image {
  background-image: url(http://lorempixel.com/output/people-q-c-324-280-6.jpg);
  width: 324px;
  height: 280px;
  bg background-repeat: no-repeat;
  box-sizing: border-box;
  border: 2px solid #fff;
  padding: 20px;
  float: left;
  color: white;
  position: relative;
}
.portfolio-image > * {
  opacity: 0;
  transition: opacity: 0.25s ease;
  position: relative;
}
.portfolio-image:hover > * {
  opacity: 1;
}
.portfolio-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.25s ease;
}
.portfolio-image:hover:before {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

<div class="portfolio-image">
  <h2>some text</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Answer 2

I would recommend adding another div object that overlays the object with your background image. The new object could contain your text and another background image. The CSS could be something like:

div.overlay {
    opacity:0;
    /* IE8 or earlier */
    filter:alpha(opacity=0);
    /* add your positioning styles here */
}

div.overlay:hover {
    opacity:0.8;
    filter:alpha(opacity=80);
}