How to add a semi transparent box over background

2019-08-17 04:21发布

站内问答 / HTML/CSS
931 2 5

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

2条回答
ゆ 、 Hurt°
2楼-- · 2019-08-17 04:37

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>
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-08-17 04:56

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)