CSS Color Overlay on Image Hover

Question

I've tried other answers but I haven't got one to work with my particular set up. I can't use any ul/li set ups, so please don't suggest that. I'm trying to get a slightly transparent orange layer to show up over an image. I can't use absolute positioning, this site is built on foundation 4 and is responsive.

So far what I'm getting is a background-color under the image instead of on top of it. Originally I also wanted to have the green bar from the image done in CSS but I couldn't make that work either. I haven't been able to make it work with the image as a background for a div either, as I'd have to set the height/width with pixels and that breaks the responsive bit.

Here's an image of what I'm trying to do:

HTML

<div>
 <div class="work-button">
   <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
   <div class="work-sub">Web Design</div></div>
</div>

CSS

.work-button {
text-align: center;
margin: 7%;
}
.work-hover:hover {
 background: rgba(229, 115, 37, 0.7);
 transition: all 0.2s ease-in-out;
 transform: scale(0);
 border-radius: 20%;
 }
 .work-sub {
 text-align: center;
 font-family: "Candal", Verdana, sans-serif;
 font-size: 1.5em;
 color: #fff;
 margin-top: -15%;
 }

NOTE ABOUT ANSWER The selected answer does have its bugs. When you resize the page, the overlay won't resize with it. Instead it will stay at the size that it initialized at with the page. When you refresh the page again, it adjusts itself again. This isn't an issue for users, but more of something that bugs me and would be an issue with other developers/employers inspecting it. Regardless, thanks again Brandon Davis!

** UPDATE **

So it seems I was calling the onresize function twice, so it was only obeying what the second function was trying to do.

 window.onresize = function () {
    resizeWorkOverlays();
    resizeSmallOverlays();
 }

If you are trying to use this function twice, this the way I got it to work. I can't seem to repeat it a third time successfully though. Hope this helps!

FINAL UPDATE August 07, 2014: See this new result functioning here. I've since switched over to a 100% CSS solution for my hovers! I'll post the resulting code here soon.

Answer 1

This is what I came up with:

(UPDATE 3)

CSS

.work-button {
  display: inline-block;
  background: none;
  transition: all 0.4s ease-in-out;
  padding: 0;
}

.work-hover {
    float: right;
    border: 6px solid rgba(255, 255, 255, 1.0);
    box-shadow: 0px 1px 3px black;
    border-radius: 20%;
}

.work-sub:hover, .work-hover:hover > .work-sub {
  background: rgba(229, 115, 37, 0.7);
  border-radius: 20%;
  /* box-shadow: 0px 1px 3px black; */
  opacity: 1.0;
}

.work-sub {
  text-align: center;
  font-family: "Candal", Verdana, sans-serif;
  font-size: 1.5em;
  color: #fff;
  float: left;
  position: absolute;
  opacity: 0.0;
  transition: all 0.4s ease-in-out;
  border: 6px solid #ffffff;
}

HTML

<div>
 <div class="work-button">
   <img class="work-hover" src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="" />
   <div class="work-sub">Web Design</div>
  </div>
</div>

JavaScript

I ended up using Javascript to create the initial height and width of the div. Based on the height of the image so it can still be responsive. It may not be the most elegant way but it works.

function resizeWorkOverlays() {
    // Edit These to reflect your proper class names
    var workButtonClass = 'work-button';
    var workButtonImage = 'work-hover';
    var workButtonSub = 'work-sub';
    ////////////////////////////////////////////////
    ///
    /// For Overlapping Border Put the Number of
    /// pixels that the border is the width of
    /// the border on the object. If unsure put '0'
    ///
    /////////////////////////////////////////////////

    var borderWidth = 0; // Width of the border 

    var workButtons = document.getElementsByClassName(workButtonClass); // Gets All Elements with the class defined in 'workButtonClass' varible

    var fullBorderWidth = borderWidth * 2; // Accounts for border-top and border-bottom and left and right

    for (var i = 0; i < workButtons.length; i++) {

        var workButton = workButtons[i]; // Work with a single work button
        var workImage = workButton.getElementsByClassName(workButtonImage)[0]; // Gets First SubHeading In A 'work-hover'
        var workSubheading = workButton.getElementsByClassName(workButtonSub)[0]; // Gets First SubHeading In A 'work-button'

        //Sets the workSubHeading Styles
        workSubheading.style.height = workImage.offsetHeight - fullBorderWidth + "px";
        workSubheading.style.lineHeight = workImage.offsetHeight - fullBorderWidth  + "px";
        workSubheading.style.width = workImage.offsetWidth - fullBorderWidth + "px";
    }
}

window.onresize = function () {
   resizeWorkOverlays(); // This will run everytime the browser resizes
}

resizeWorkOverlays(); // This sets the overlays initially

You may also consider using a square image and rounding the corners with border-radius instead of using a "pre-formatted" image. Then the border radius on the overlay will match the image. Just a thought though.

UPDATED Fiddle:

Fiddle

Answer 2

I'm a little bit confused as to what you are trying to do but I can help you with part of your question.

You can make a responsive div with CSS background image with this:

.responsive-image{
  width: 100%;
  height: 0;
  padding-bottom: <!-- Divide the height by the width -->;
  background: url(@url) no-repeat;
  background-size: 100%;
  max-width: 810px;
}

Answer 3

Add an overlay div (or any other tag) inside .work-button , after .work-hover

<div class="work-button">
  <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-overlay">Web Design</div>
  <div class="work-sub">Web Design</div>
</div>

I'm assuming you want to show it on hover so

.work-button:hover .work-overlay {
  -webkit-transform: scale(1);
}

Then add your style to .work-overlay

Fiddle: http://jsfiddle.net/KdnJQ/4/

Note: Due to your image's formation I used fixed width and height values for the overlay.

Answer 4

Do you mean something like this?

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <img class="hoverimage" src="http://static3.depositphotos.com/1000988/123/i/950/depositphotos_1238765-Transparent-background-with-gradient-eff.jpg" alt="" />
</div>
<style>
    .image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
    .image img { max-width: 100%; max-height: 100%; }
    .hoverimage { position: absolute; top: 0; left: 0; display: none; opacity: 0.5;}
    .image:hover .hoverimage { display: block; }
</style>

http://jsfiddle.net/Zf5am/699/

Answer 5

If you can change your outer container ( .work-button ) to be an inline-block with position:relative instead of a block, you can add an overlay div with position: absolute , and make it take the dimensions of the parent with width: 100%; height: 100% width: 100%; height: 100% :

<div class="work-button">
    <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-sub">Web Design</div>
    <div class="overlay"></div>
</div>

.work-button:hover .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.work-button:hover .overlay {
     background: rgba(229, 115, 37, 0.7);
     transition: all 0.4s ease-in-out;
     transform: scale(0);
     border-radius: 20%;
}

http://jsfiddle.net/KdnJQ/5/