Search code examples
htmlcsslinear-gradients

How to mask text on background size change

Currently I am working on a new website for our web design business and I need to mask the mobile nav text so that it is shown while the background is visible and for the text to be hidden while it is not.

Currently the animation does this, with the text overlapping when the background slides out.

Image of issues

I essentially need it to do this Image of solution (photoshopped) where the text is "masked" to be hidden when it slides out.

<div class="et_pb_menu__menu custom-menu-active">
<nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
        <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
            <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
        </li>
        <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
            <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
        </li>
        <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
            <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
        </li>
        <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
            <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
        </li>
        <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
            <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
        </li>
        <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
            <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
        </li>
        <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
            <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
        </li>
        <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
            <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
        </li>
    </ul>
</nav>

.et_pb_menu__menu {
position: fixed;
top: 0; left: 0;
height: 100vh!important;
width: 100vw;
background: linear-gradient(135deg,rgba(254,209,7,0.95) 50.1%,rgba(0,0,0,0) 50%);
background-size: 100px 100px;
background-position: -100px -100px;
background-repeat: no-repeat;
pointer-events: none;
transition: all 1s ease;}

.et_pb_menu__menu.custom-menu-active {
pointer-events: all;
background-position: 0% 0%;
background-size: 400% 300%;}

A test version of the site is here: https://grow-my-business.dreamhosters.com/

(mobile nav is 980px and down)

Solution

  • Replace the background with mask and keep everything the same (size and position)

    .et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  -webkit-mask: linear-gradient(135deg, #fff 50.1%, transparent 50%);
  -webkit-mask-size: 100px 100px;
  -webkit-mask-position: -100px -100px;
  -webkit-mask-repeat: no-repeat;
  transition: all 1s ease;
}

.et_pb_menu__menu:hover {
  -webkit-mask-position: 0% 0%;
  -webkit-mask-size: 400% 300%;
}
    <div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>

    Also like below:

    .et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  -webkit-mask: linear-gradient(135deg, #fff 50.1%, transparent 50%);
  -webkit-mask-position: 100% 100%;
  -webkit-mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  transition: all 1s ease;
}

.et_pb_menu__menu:hover {
  -webkit-mask-position: 0 0;
}
    <div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>

    Clip-path can also do it:

    .et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  clip-path:polygon(0 0,0 0,0 0);
  transition: all 1s ease;
}

html:hover .et_pb_menu__menu{
  clip-path:polygon(0 0,200vmax 0,0 200vmax);
}
    <div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>