htmlcssmenufadeout

Fadeout content when it reaches top header

I am trying to create a gradient png via -webkit-gradient to make an illusion that the content is being faded out when it reaches the top header on scroll so that the content doesn't go behind the header.

Here is what I attempted:

.wrapper {
  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
  background-attachment: fixed;
}
.menu {
  position: fixed;
  width: 100%;
  z-index: 98;
  height: 80px;
}
.gradient-png {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  height: 80px;
}
.hamburger {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 50px;
}
.site-logo {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 170px;
}
.content {
  padding-top: 100px;
}
      <div class="wrapper">
        <div class="menu gradient-png">
          <img class="hamburger" alt="menu" />
          <div class="site-logo">Logo</div>
        </div>
        <div class="content">
          <p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p>
        </div>
      </div>

Somehow the mask image is not taking effect, I can still see that my content is behind my menu.

I am trying to achieve something like this, where the text below is the content: fadeout

Solution

  • mask-image is meant to work in conjunction with a background image on the same element. I've added that image in the demo below and cleaned up the mask-image syntax. (And made minor modifications to clean up the look.) All changes are commented in the CSS with /*** ***/.

    Update: Changed how background images are set.

    References:

    :root {
  --background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"); /*** added ***/
}
body {
  margin:0; /*** optional addition ***/
}
.wrapper {
  background-image: var(--background-image); /*** modified ***/
  background-attachment: fixed;
}
.menu {
  position: fixed;
  width: 100%;
  z-index: 98;
  height: 80px;
}
.gradient-png {
  mask-image: linear-gradient(white 75%, transparent); /*** added; non-chrome ***/
  -webkit-mask-image: linear-gradient(white 75%, transparent); /*** corrected; chrome ***/
  background-image: var(--background-image); /*** added ***/
  height: 90px; /*** optional modification ***/
}
.hamburger {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 50px;
}
.site-logo {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 170px;
}
.content {
  padding-top: 100px;
}
    <div class="wrapper">
  <div class="menu gradient-png">
    <img class="hamburger" alt="menu" />
    <div class="site-logo">Logo</div>
  </div>
  <div class="content">
    <p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p>
  </div>
</div>