Adding overlay to images in overflow box - html

Question

Each image should have a transparent black overlay with a white number centered over it like "100", "200" etc. This number represents the amount of points needed to unlock the picture. How can I achieve this?
JSFiddle
HTML
<div class="wrapper">
<div class="scrolls">
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
</div>
</div>
CSS
.wrapper {
background:#f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}

Answer 1

You need to wrap each image and overlay in an individual div. The overlay is then positioned absolutely over the image.
.wrapper {
background: #f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space: nowrap;
padding-bottom: 25px;
}
.imageDiv {
margin: 2px;
max-height: 150px;
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
position: relative;
}
.imageDiv .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
line-height: 150px;
color: transparent;
font-size: 2em;
text-align: center;
transition: all .5s ease;
}
.imageDiv:hover .overlay {
background: rgba(0, 0, 0, 0.55);
color: white;
;
}
.imgaDiv img {
display: block;
}
<div class="wrapper">
<div class="scrolls">
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
</div>
</div>
For a refinement/enhancement, you could do away with an actual overlay div and use a pseudo-element instead..if it's just styling. The technique remains the same.