Solution 1 :

I’m not entirely sure what all is happening with each layer – it looks like there may be something weird with the z-indexs? It seems like the text only shows back up once the opacity reaches 1, which means some other element it was relaying on for the hover state might be getting covered up.

I think, though, that you could fix it by just adding an explicit opacity change to the <u> element.

#headerctgunnar:hover u {
  opacity:0;
}

Problem :

Can anyone help me figure out why after you hover over the div that says ‘HEADER TEXT’ the text reappears underneath the hovering DIV?

The divs in question are #headerctgunnar, #headerchovergunnar, and #headercgunnar … At first I just had #headercgunnard and #hoverchovergunnar but I added in the new div to see if having a div between the one with “HEADER TEXT” in it and the one that appears on hover would help, which it didn’t.

.bgcgunnar {
  width: 400px;
  height: 500px;
  background: transparent url(https://i.imgur.com/ujKvskd.png) no-repeat;
  background-position: left;
}

#headercgunnar {
  width: 384px;
  height: 100px;
  background: transparent url(https://i.imgur.com/xfNL6tD.png) repeat;
}

#headerctgunnar {
  width: 244px;
  height: 40px;
  padding: 30px 120px 30px 20px;
  background: #aaa;
  background-position: left;
  font-family: 'Oswald', serif;
  text-transform: uppercase;
  font-size: 36px;
  color: #fff;
  line-height: 100%;
  letter-spacing: -1px;
  text-align: left;
  float: left;
}

#headerctgunnar u {
  border-bottom: solid 2px #C6D5D0;
  text-decoration: none;
}

#headerchovergunnar {
  width: 244px;
  height: 40px;
  padding: 30px 120px 30px 20px;
  background: rgba(198, 213, 208, 1);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #aaa;
  letter-spacing: .5px;
  line-height: 120%;
  opacity: 0;
  transition-duration: 1s;
  margin-top: -66px;
  margin-left: -20px;
}

#headerchovergunnar b {
  font-weight: bold;
  color: #000;
}

#headercgunnar:hover #headerchovergunnar {
  opacity: 1;
}

#headerchovergunnar a:link,
#headerchovergunnar a:active,
#headerchovergunnar a:visited {
  color: #fff;
  transition: 1s;
  text-decoration: none !important;
}

#headerchovergunnar a:hover {
  color: #C6D5D0 !important;
  text-decoration: none;
}

.polygoncgunner {
  width: 150px;
  height: 500px;
  clip-path: polygon(43% 0, 100% 0, 100% 100%, 57% 100%, 0 20%);
  background: #ccc url(https://pbs.twimg.com/media/DAnzyp3WsAEU0tq.jpg);
  background-size: cover;
  background-position: center;
  margin-top: -100px;
  float: right;
}

.textccgunnar {
  width: 230px;
  height: 380px;
  padding: 10px;
  background: #fff;
  float: left;
}

.textcgunnar {
  width: 220px;
  height: 380px;
  padding: 0px 10px 0px 0px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #000;
  line-height: 120%;
  letter-spacing: .5px;
  float: left;
  text-align: justify;
  overflow: auto;
  background: #fff;
}

.textcgunnar p::first-letter {
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  color: #C6D5D0;
  float: left;
  display: block;
  padding: 10px 5px 5px 5px;
}

.textcgunnar b {
  font-weight: bold;
  color: #9DB7AE;
}

.textcgunnar::-webkit-scrollbar {
  background: #fff;
  width: 5px;
}

.textcgunnar::-webkit-scrollbar-thumb {
  background: #C6D5D0;
  width: 5px;
}

.textcgunnar::-webkit-scrollbar-corner {
  background: #C6D5D0;
}
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700|Nixie+One|Oswald&display=swap" rel="stylesheet">

<div class="bgcgunnar">
  <div id="headerctgunnar">
    <u>header text</u>
    <div id="headercgunnar">
      <div id="headerchovergunnar">
        <b>Tag:</b> <a href="">Words</a><br>
        <b>Notes:</b> Words<br>
        <b>Outfit:</b> <a href="">Click here!</a>
      </div>
    </div>
  </div>
  <div class="polygoncgunner">
  </div>
  <div class="textccgunnar">
    <div class="textcgunnar">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia elementum ante, in imperdiet magna tincidunt sit amet. Sed felis lorem, pretium ut bibendum non, consectetur ac nulla. In posuere ipsum at ligula tristique, id sollicitudin
        nunc imperdiet. Pellentesque eu tortor sit amet neque hendrerit posuere vitae et est. Etiam sit amet leo et urna dictum porta nec quis risus. Integer nec aliquet sapien. Etiam non purus tincidunt, feugiat ipsum id, fermentum turpis. Morbi blandit
        dapibus viverra. Fusce pharetra tincidunt elit eget dictum. In mattis turpis sed dictum consequat. Donec dolor orci, tristique nec tristique non, accumsan non est.</p>

      <p>Aliquam sem tortor, fringilla nec libero at, bibendum tincidunt sapien. Phasellus porta molestie augue, nec lacinia metus interdum non. Suspendisse finibus elit sed tortor ornare, a gravida magna tristique. Vivamus eu viverra arcu, id dapibus sapien.
        Suspendisse quis volutpat massa, non pellentesque lacus. Etiam semper bibendum ornare. Donec cursus odio eu rutrum ultrices.</p>

      <p>Quisque quis risus elementum, hendrerit eros eget, rhoncus mi. Mauris tempus, quam ac mattis faucibus, purus eros elementum ipsum, ut volutpat elit ipsum ac justo. Quisque id faucibus justo. In id est fringilla, congue eros eget, dapibus eros. Maecenas
        dignissim enim nec arcu mattis molestie. Quisque ultricies dictum mi vel fermentum. Praesent blandit tincidunt magna in interdum. Morbi suscipit consectetur est, nec semper massa ornare sed. Donec commodo ut augue quis fermentum. Suspendisse non
        finibus risus, sit amet suscipit purus. Phasellus consectetur quis quam vel congue. Nunc et mattis mauris. Nullam ut tempus diam. Sed gravida tincidunt pretium.</p>
    </div>
  </div>
</div>

By

Leave a Reply

Your email address will not be published. Required fields are marked *