Hover overlay on a container with multiple divs within? (flexbox) - html

Question

I have a flex container that has multiple divs within. I am trying to figure out how to set a hover overlay black overlay with copy that is the same size as the container and overlays the divs within the container. I'm assuming there's a way to do this with HTML & CSS without JS? The idea being that when you hover over one of the boxes on the page, a "READ MORE" notice comes up on a 75% transparent black overlay. I'm just rambling now in order to "add some more details"
.box {
display: flex;
transition: background-color 0.5s ease;
background: white;
width: 23%;
margin: 10px;
color: black;
font-weight: bold;
font-size: .7em;
text-align: center;
justify-content: space-between;
height: 40%;
border-left: .5px solid black;
border-right: .5px solid black;
flex-direction: column;
}
#header-box {
display: flex;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
justify-content: flex-star;
align-content: flex-start;
font-family: 'Big Caslon';
}
#end-matter {
display: flex;
border-top: 10px solid black;
border-bottom: 10px solid black;
border-width: .5px;
width: 100%;
justify-content: space-around;
}
#sign-photo {
display: flex;
justify-content: center;
}
#aries {
display: flex;
width: 50%;
justify-content: center;
}
.sign-copy {
display: flex;
padding-left: 5px;
}
<div class="box">
<div id="header-box">
<h2 class="sign-copy">
Aries
</h2>
</div>
<div id="sign-photo">
<img id="aries" src="CSS/images/aries2.svg">
</div>
<div id="end-matter">
<p>
wtf
</p>
<p>
weird content here
</p>
<p>
time something?
</p>
</div>
</div>

Answer 1

You can use :hover as well as :after on specific css classes.
For example:
.container {
border: 2px solid blue;
display: flex;
}
.eachDiv {
border: 1px solid red;
background-color: gray;
width: 33%;
height: 50px;
}
.eachDiv:hover {
color: purple;
background-color: yellow;
}
.one:hover:after {
content: "this is the first div!!!";
}
.two:hover:after {
content: "el segundo div";
}
.three:hover:after {
content: "three is the best";
}
<div class="container">
<div class="eachDiv one">one</div>
<div class="eachDiv two">two</div>
<div class="eachDiv three">three</div>
</div>
Note: this answer may be a better solution to your question.