Image Overlay with CSS

Question

So I'll try and be brief - we have a slider on our website and when we upload the images the text on the slider is difficult to read, so we figured out that if we added a white overlay in photoshop to the picture, the slider looks much better.

However, this is not a great solution because once the post moves to the general column, we find that the image with the overlay by photoshop is now not as appealing to the eye.

The solution that was asked ,was can we add a semi-transparent overlay to the div that holds the slider, so that way any image uploaded will have that semi transparent overlay only in the slider.

I did some research on here and other sites working with overlay and css - and have worked it into a set where I'm almost there but am missing some fundamental pieces I think.

Right now its working on hover only, so I need to figure that out, but if you see the example you'll understand

In my utopia - if I click on RUN on jsfiddle, that image should have the overlay on it already, not on hover and I think I'm missing where I'm supposed to make edits

http://jsfiddle.net/9LXcU/

.box { 
    border:1px solid #000;
    padding:5px;
    height:151px;
    width:195px;

}
.overlay {  
    background:rgba(255, 0, 0, .75);
    text-align:center;
    opacity:0;    
    width:100%;height:100%; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box:hover {
    border:1px solid #555;
    border-radius:5px;
}
.box:hover .overlay {
    opacity:12;
}
.search {
    position:relative;
    top:60px;
}

Answer 1

Well, here is a FIDDLE that may be what you want.

CSS

.box { 
  border:1px solid #000;
  padding:5px;
  height:151px;
  width:195px;
  text-align:center;
  background: url('http://www.breastcanceranswers.com/wp-content/uploads/2013/10/featuredimagebcam.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.overlay {
    width: 100%;
    height: 100%;
    background-color: pink;
    opacity: 0.5;
    color: red;
    vertical-align: middle;
}