Skip to content Skip to sidebar Skip to footer

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?"