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><htmllang="en"><head><metacharset="utf-8"><stylemedia="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><divclass="square"><divid="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?"