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

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>

Hi Joe welcome to SO. Do you have any code you can attach? It helps a lot! — Zac, Feb 18 '19 at 19:57
Hi Joe, if you could use https://codepen.io/pen to create a sample of the issue then it would work for others to provide a solution. — AspiringCanadian, Feb 18 '19 at 19:59
Do you want the "READ MORE" notice to come up over each individual box on hover, or over all the boxes? — Ethan Ryan, Feb 18 '19 at 20:23

score 2 · Accepted Answer · edited Feb 21 '19 at 19:57

2

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.

edited Feb 21 '19 at 19:57

Zac

2,201
24
48

answered Feb 18 '19 at 19:58

Ethan Ryan

467
10
16

1

This is not an answer, use the comment section for comments. – Zac Feb 18 '19 at 19:58
@Zac updated my answer with some example code, showing use of :hover and :after – Ethan Ryan Feb 18 '19 at 20:12

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

1 Answers1