How to add a semi transparent box over background image but under text inside div?

Question

This is what I currently have:

<div class="square">
   <div id="wrapper">
      <h2>Text</h2>
      <h3>Text</h3>
   </div>
</div>

.square {
    padding: 10px;
    width: 150px;
    height: 150px;
    margin-right:50px;
    margin-bottom: 30px;
    display: inline-block;
    background: url('image.png');
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

#wrapper {
    position: absolute;
    bottom: 5px;
    width: 150px;
    max-height: 150px;
    overflow: hidden;
}

Now I want to make a semi transparent black box appear when .square is hovered over, but I can't quite figure out how to do it :( I need it to essentially darken the background to make the and text more readable when the box is hovered over, so it needs to somehow be above the background image but below the text.

Can anyone help? Thanks

ralph.m · Answer 1 · 2013-05-06T23:55:16.227

0

Do you mean something like this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.square {
    padding: 10px;
    width: 150px;
    height: 150px;
    margin-right:50px;
    margin-bottom: 30px;
    display: inline-block;
    background: url('image.png');
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

#wrapper {
    position: absolute;
    bottom: 5px;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

#wrapper:hover {
    background: rgba(0,0,0,.3);
}
</style>

</head>
<body>

<div class="square">
   <div id="wrapper">
      <h2>Text</h2>
      <h3>Text</h3>
   </div>
</div>

</body>
</html>

edited May 06 '13 at 23:55

answered May 06 '13 at 13:40

ralph.m

13,468
3
23
30

Can you explain how you tried it? Rn that code above in your browser and see if it does what you want. It works to do what I think you are asking for, so it's then a matter of adapting it to your purpose. – ralph.m May 06 '13 at 14:05
I think that the background in the hover replaces the image. If you want to darken the imagen, specify both backgrounds in the .square:hover -> background: url(image.png'), rgba(0,0,0,0.3); – vals May 06 '13 at 17:09
Ah heck, yes. Sorry, I placed the hover effect on the wrong div. I've updated the code now so that there is a transparent background color on the `wrapper` div, rather than on the `.square` div. Sorry about that! – ralph.m May 06 '13 at 23:56

score 0 · Answer 2 · answered May 06 '13 at 13:53

If #wrapper covers the whole background image too you can add

#wrapper:hover{
   background-color:rgba(0,0,0,0.5);
}

To get the background to do a half second fade add

-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;

to #wrapper:hover

You can allso add the transition css to #wrapper to get a fade on mouseout.

At http://css3generator.com/ there is a nice css3 generator to generate css for transitions and alot more.

How to add a semi transparent box over background image but under text inside div?

2 Answers2

Linked