HTML – I don’t know how to fix this hover effect

  • Home / Blog / HTML – I…

HTML – I don’t know how to fix this hover effect

I’m trying to create more effect where the words appear when the mouse hovers over the hero section. If you randomize the code at the bottom of the CSS file, you will see that the code works perfectly. The only problem is that the background image appears and turns completely white. I don’t know how to fix it. Need some help, please and thanks

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pigeon</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
      integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
    <!-- Navbar Section -->
    <nav class="navbar">
        <div class="navbar__container">
          <a href="#home" id="navbar__logo">Pigeon<small id="trade">TRADE</small></a>
          <div class="navbar__toggle" id="mobile-menu">
            <span class="bar"></span> 
            <span class="bar"></span>
            <span class="bar"></span>
          </div>
          <ul class="navbar__menu">
            <li class="navbar__item">
              <a href="#home" class="navbar__links" id="home-page">Home</a>
            </li>
            <li class="navbar__item">
              <a href="#about" class="navbar__links" id="about-page">About</a>
            </li>
            <li class="navbar__item">
              <a href="#services" class="navbar__links" id="services-page">Services</a>
            </li>
            <li class="navbar__btn">
              <a href="#sign-up" class="button" id="signup">Sign Up</a>
            </li>
          </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero_two hero" id="home">
        <div class="hero__container">
            <div class="image__overlay">
                <div class="hero__content">
                    <h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
                </div>
            </div>
        </div>
        <div class="main__btn">
            <button class="button button__color"><a href="#">Explore</a></button>
        </div>
    </div>

Make the code uncertain all the way to see what I’m talking about

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Kumbh Sans", sans-serif;
    scroll-behavior: smooth;
  }
  
  .navbar {
    background: #131313;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 555;
  }
  
  .navbar__container {
    display: flex;
    justify-content: space-between; 
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  #navbar__logo {
    background-color: #ff8d02;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
  }

  #trade {
    background-color: #0045f2;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    position: relative;
    font-size: 13px;
    bottom: 6px; 
    
  }
  
  .navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
  }
  
  .navbar__item {
    height: 80px;
  }
  
  .navbar__links {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease;
  }
  
  .navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
  }
  
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #833ab4;
    background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
    background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
    color: #fff;
    transition: all 0.3s ease;
  }

  .navbar__btn:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    
    border-radius: 4px;
    transition: all 1s ease;
  }  
  
  .navbar__links:hover {
    color: #ff7802;
    transition: all 0.3s ease;
  }

  
  @media screen and (max-width: 960px) {
    .navbar__container {
      display: flex;
      justify-content: space-between;
      height: 80px;
      z-index: 1;
      width: 100%;
      max-width: 1300px; 
      padding: 0;
    }
  
    .navbar__menu {
      display: grid;
      grid-template-columns: auto;
      margin: 0;
      width: 100%;
      position: absolute;
      top: -1000px;
      opacity: 1;
      transition: all 0.5s ease;
      z-index: -1;
    }
  
    .navbar__menu.active {
      background: #131313;
      top: 100%;
      opacity: 1;
      transition: all 0.5s ease;
      z-index: 99;
      height: 60vh;
      font-size: 1.6rem;
    }
  
    #navbar__logo {
      padding-left: 25px;
    }
  
    .navbar__toggle .bar {
      width: 25px;
      height: 3px;
      margin: 5px auto;
      transition: all 0.3s ease-in-out;
      background: #fff;
    }
  
    .navbar__item {
      width: 100%;
    }
  
    .navbar__links {
      text-align: center;
      padding: 2rem;
      width: 100%;
      display: table;
    }
  
    .navbar__btn {
      padding-bottom: 2rem;
    }
  
    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      height: 80px;
      margin: 0;
    }
  
    #mobile-menu {
      position: absolute;
      top: 20%;
      right: 5%;
      transform: translate(5%, 20%);
    }

    .navbar__toggle .bar {
      display: block;
      cursor: pointer;
    }
    
    #mobile-menu.is-active .bar:nth-child(2) {
      opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    #mobile-menu.is-active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
}

/* Hero Section */

.hero {
  padding: 50px 0;
  background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
  background-size: cover;
  overflow: hidden;
  position: relative;
  background-position: top;
  display: flex;
  flex-direction: column;
}


.hero__heading {
    color: #fff;
    font-size: 100px;
    margin-left: 30px;
    text-shadow: 2px 2px 8px #000000c4;
}

.orange {
  color: rgb(255, 89, 0);
}

.main__btn {
  margin: 0 auto;
  margin-top: 3rem;
}

.main__btn a {
  color: #fff;
  text-decoration: none;
  z-index: 2;
  position: relative;
  padding: 10px 20px;
  font-size: 1.8rem;
}

.button__color {
  background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
  background: linear-gradient(to right, #1e5dff,  rgb(255, 89, 0));
}

/*
.hero_two {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  opacity: 0;
  transition: all 0.25s ease;
}

.hero_two > * {
  transform: translateY(20px);
  transition: all 0.25s ease;
}

.hero_two:hover {
  opacity: 1;
}
.hero_two:hover {
  transform: translateY(0);
} */

Write a Comment

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

x