I am trying to create an overlay that will cover an entire div/card. I have three cards that I want to rollover black when active. For some reason, I can't get the entire div to be selected.
HTML:
<div class="item ">
<div class="overlay">
<img src="http://placehold.it/600x350">
<h2>Title</h2>
<p> Text</p>
</div><div class="overlay"> </div>
</div>
and CSS:
.item {
padding: 0px 0;
margin: 1%;
border-radius: 2px;
flex: 1 250px;
height: auto;
text-align: center;
background: linear-gradient(0deg, #efefef, #ffffff);
}
.overlay {
position: relative;
background-color: rgba(0,0,0,0)
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.overlay:hover {
opacity: 1;
background-color: rgba(0,0,0,1);
}
div.item
has a certain size and shape. Style it as relative
so that the next thing will work
Make div.overlay
position:absolute
- that will overlay it, but it has no size, so it will still be invisible.
Then, make div.overlay
the full height of its parent ( div.item
).
When made visible (at :hover) it will be 100% height/width of .item, and will overlay it.
body {background-color: #C70025;} img {width: 100%;} #container {width:90%;margin:0 auto;display:flex;flex-wrap:wrap; justify-content:space-between;} .item {color:#000;padding:0px 0;margin:1%;border-radius:2px;flex:1 250px;height:auto;text-align:center;background:linear-gradient(0deg, #efefef, #ffffff);} .item{position:relative;} .overlay { position:absolute; top:0;left:0;right:0;bottom:0; background-color: rgba(0,0,0,0) -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .overlay:hover { opacity: 1; background-color: rgba(0,0,0,1); }
<div id="container"> <div class="item "> <img src="http://placehold.it/600x350"> <h2>Title</h2> <p> Text</p> <div class="overlay"> </div> </div> <div class="item"> <img src="http://placehold.it/600x350"> <h2> Title </h2> <p>Text</p> <div class="overlay"> </div> </div> <div class="item"> <img src="http://placehold.it/600x350"> <h2> Title </h2> <p>Text</p> <div class="overlay"> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.