How To Add A Semi Transparent Box Over Background Image But Under Text Inside Div?
This is what I currently have:
Text
Text
Solution 1:
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.
Solution 2:
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>
Post a Comment for "How To Add A Semi Transparent Box Over Background Image But Under Text Inside Div?"