How to I fade a header with overlapping text

Question

so im trying to have two different headers here. One displaying my name and the other displaying a quote I think is pretty neat. I would like to make them change on hover.

Ive gotten this to happen once, but the two different set of texts where not on top of each other, but underneath.

I tried fixing this with some js, because I had seen someone do smth similar (so I thought "eh why the heck wouldnt it work).

Excuse the boring site and code, Ive only started coding 3 days ago (thats maybe why this seems to be a herculean task for me). (Its a testing website, so I went with a simple topic.. a CV)

I'd appreciate any help I could get with this. Thanks

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode")
}

body {
  font-family: Arial, Helvetica, News Courier;
  margin: 0;
}

.header {
  padding: 80px;
  text-align: center;
  background: #40826D;
  color: white;
}

.header:hover {
  background: #6e7f80;
  transition: 1s;
  color: #6e7f80;
}

.header h1 {
  font-size: 40px;
}

.text {
  font-size: 40px;
  opacity: 0;
}

.header:hover .text {
  opacity: 1;
  color: white;
  transition: 1s;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar button {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 21px;
  text-decoration: none;
}

.navbar a.right {
  float: right;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

<div class="header">
  <div class="text">
    <h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
    <p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
     creativity without failure</i></p>
  </div>
  <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
  <p>a curriculum vitae</p>
</div>

<div class="navbar">
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV.html">Home</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
  <div>
    <button onclick="myFunction()"></button>
    <script type="text/javascript">
    </script>
  </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" class="right">Contact me</a>
</div>

<div style="text-align: center;font-family: News Courier">
  <h1>Welcome to my virtual curriculum!</h1>
  <h3>I hope this will give you a general idea of me.</h3>

  <p>This page will provide you with:</p>
  <p>My personalia</p>
  <p>Information about my academic career</p>
  <p>Information about my work experience</p>
  <p>Information regarding myself</p>
</div>

Could you please explain better, I did not understand what you would like to achieve actually — Evren, May 02 '21 at 19:06
Looks like your fade is working on hover, I assume you want the fade animation to fade back in on mouseout? Perhaps you should edit your question and be a bit more precise on what your expected outcome is. — dale landry, May 02 '21 at 19:08

score 0 · Answer 1 · answered May 02 '21 at 19:13

You are looking for display property. Just replace opacity: 0 with display: none and opacity:1 with display: block. You can check difference between them here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Luca Frias</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body {
 font-family: Arial, Helvetica, News Courier;
 margin: 0;
}
.header {
padding: 80px;
text-align: center;
background: #40826D;
color: white;
}
.header:hover {
background: #6e7f80;
transition: 1s;
color: #6e7f80;
}
.header h1 {
font-size: 40px;
}
.text {
font-size: 40px;
display: none;
}
.header:hover .text {
 display: block;
 color: white;
 transition: 1s;
 }
 .navbar {
 overflow: hidden;
 background-color: #333;
 }
.navbar a {
 float: left;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 20px;
 text-decoration: none;
 }
.navbar button {
 float: right;
 display: block;
 color: white;
text-align: center;
padding: 21px;
text-decoration: none;
}
 .navbar a.right {
 float: right;
 }
.navbar a:hover {
 background-color: #ddd;
 color: black;
 }
.dark-mode {
 background-color: black;
 color: white;
 }
</style>
</head>
<body>

<div class="header">
<div class="text">
<h1 style="font-family: News Courier;text-align: left">Brene Brown</h1>
<p style="font-family: News Courier;text-align: center"><i>There is no innovation and 
 creativity without failure</i></p>
 </div> 
 <h1 style="font-family: News Courier">Luca S. Frias Serrano</h1>
<p>a curriculum vitae</p> 
</div>

 <div class="navbar">
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV.html">Home</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/pls%20save%20me.html">Personalia</a>
 <a target="_self" 
href="file:///Users/lucafrias/Downloads/HTML/academic%20career.html">Career</a>
 <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/aboutme.html">About me</a>
    <div>
  <button onclick="myFunction()"></button>
  <script type="text/javascript">
    function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode")
    }
  </script>
    </div>
  <a target="_self" href="file:///Users/lucafrias/Downloads/HTML/CV/contact%20me.html" 
 class="right">Contact me</a>
</div>

 <div style="text-align: center;font-family: News Courier">
 <h1>Welcome to my virtual curriculum!</h1>
 <h3>I hope this will give you a general idea of me.</h3>

    <p>This page will provide you with:</p>
    <p>My personalia</p>
    <p>Information about my academic career</p>
    <p>Information about my work experience</p>
    <p>Information regarding myself</p>
  </div>
  </body>
  </html>

If anything is not as your expected. Mention in comment section

Carlos Alberto Monroy Zuñiga · Answer 2 · 2021-05-02T20:13:16.393

you can get it with plain css:

<style>
    .header {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #40826d;
        color: white;
        position: relative;
        font-family: News Courier;
    }
    .card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 400px;
        justify-content: center;
        color: white;
    }
    .c1 .title {
        text-align: left;
        font-size: 40px;
    }
    .c1 .text {
        text-align: center;
    }
    .c1 {
        padding: 0 5%;
    }
    .c2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        font-size: 20px;
        opacity: 0;
    }
    .c2:hover {
        background: #6e7f80;
        opacity: 1;
        transition: 1s ease opacity;
    }
    .c2 .title {
        text-align: center;
    }
</style>
<div class="header">
    <div class="card c1">
        <h2 class="title">Brene Brown</h2>
        <p class="text">
            <i>There is no innovation and creativity without failure</i>
        </p>
    </div>

    <div class="card c2">
        <h2 class="title">Luca S. Frias Serrano</h2>
        <p>a curriculum vitae</p>
    </div>
</div>

i used "position relative" and "position absolute".

in this particular case just center the absolute positioned "card" with this set:

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

and use z-index to get the absolute positioned "card" (.c2) on the top of (.c1)

How to I fade a header with overlapping text

2 Answers2