Tips for concealing text when the background size changes

Currently, I am in the process of developing a new website for our web design company. One key task is to hide the mobile navigation text while keeping the background visible, and vice versa.

The current animation achieves this effect by causing the text to overlap when the background slides out.

Click here to see the issues

I am looking for a solution similar to the one shown in this photoshopped image, where the text is "masked" to be hidden as it slides away.

<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>
        // more list items...
    </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%;}

You can view a test version of the site here:

(Please note that the mobile navigation applies to screen sizes of 980px and below.)

htmlcsslinear-gradients

Answer №1

Modify the background using a mask while maintaining 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%;
}

To achieve a similar effect:

.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;
}

An alternative method using clip-path:

.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);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the CSS of a table cell using inline script without the need for specifying an id, class, or content

While working with an ASP.NET MVC helper method to create a webgrid, I encountered the need to dynamically change the colors of specific table rows. Unfortunately, I realized that I couldn't directly access the td tag to modify its properties or assig ...

javascriptjqueryhtmlcssparent

Error message: ASP.Net Update Panel unable to access global variables in code-behind

I have been working on updating a bootstrap progress bar's percent on my website. While I understand that ajax is the recommended method for this, I attempted to achieve this without using ajax and was able to make some progress. Below is the code sn ...

c#htmlasp.netprogress-barupdatepanel

What could be causing the inability of select:-moz-focusring to eliminate the dotted lines in the Firefox browser on this bootstrap navigation

Is there a way to remove the Firefox dotted lines from my bootstrap navigation bar? I've come across suggestions to add the following code snippet to the CSS file: a:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; ...

cssangularjstwitter-bootstrapfirefox

The CSS link will only appear when hovering over the image

I'm having trouble getting the f1 link to appear on an image only when hovering over the image. I tried some code but it's not working, the link is not appearing. Can someone help me understand what the problem is and provide a solution? <div ...

javascripthtmlcss

Create a JavaScript timer on a PHP file that sets the input and textarea styles back to their default

When I use a timer in a JavaScript file after submitting a form to insert data into a MySQL database via PHP, the style of the textarea and input elements changes back to default. This issue only occurs when the timer is active. I tested submitting the fo ...

javascriptphphtmlcssmysql

Capable of retrieving response data, however, the label remains invisible in the dropdown menu

Upon selecting a country, I expect the corresponding city from the database to be automatically displayed in the dropdown menu. While I was able to retrieve the state response (as seen in the console output), it is not appearing in the dropdown menu. Inte ...

htmlangulartypescriptdrop-down-menu

Choosing from a dropdown menu by pressing keys

When I press the first letter of an option in my dropdown list, it works fine. However, if I try to press two, three, or four letters consecutively, the control vanishes. For example, if the option is 'Jquery' and I press J only, it works but pre ...

jqueryhtmltwitter-bootstrap

The date picker functionality provided by ngMaterial is currently malfunctioning within an AngularJS environment

Can anyone assist me with adding a date picker to an input box? I've come across ngMaterial which seems to provide the necessary features. Despite including all required files, I am encountering an error. angular.js:68Uncaught Error: [$injector:un ...

javascriptjqueryangularjshtmlangular-material

Looking to access files from the Android asset folder within an HTML document?

I'm currently developing an HTML-based app for Android. I've successfully displayed the HTML file using this code: "file:///android_asset/index.html" Now, my goal is to load local image files or fonts within that HTML file from the assets folder ...

androidhtml

Connecting to a particular destination on an external site

Can I add a link on my website that directs users to a specific location on another website, similar to an anchor tag but without creating the anchor point myself? I have a feeling it might not be possible, but perhaps there is a clever workaround. ...

csshtml

Adjust the dropdown width on a bootstrap form to match the size of the textbox

In order to maintain a combined width of 450px, I have two textboxes. One textbox includes a dropdown menu while the other does not. Both textboxes are part of an input group. The dropdown can switch between either textbox at any time. I need the width ...

htmlcssbootstrap-5

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

Creating a Dropdown Selection Menu Dynamically with jQuery and SQL Query结果

I have a website that provides information from a database based on user-set parameters. Currently, the SQL Statement is loaded from a file to populate a dropdown menu with options. The HTML code used for this process is displayed below: while($rec = $con ...

phpjqueryhtml

Fill a grid child with an excessive amount of content without specifying a fixed height

Check out this JS Fiddle example .grid { height:100%; display:grid; grid-template-rows:auto 1fr; background-color:yellow; } .lots-of-content-div { height:100%; background-color:orange; overflow-y:auto; } <div class="grid"> <p&g ...

javascripthtmljquerycss

What is the solution to this issue? How can I break the grid row in Bootstrap 4? Which specific Bootstrap classes should I apply for this task?

Test Links. Utilizing Bootstrap classes, adjust the div element with the ID "links" to display differently based on screen resolutions. On extra small screens (<576px), each link and ad should occupy one whole row. It will have this appearance: https:// ...

htmlcsstwitter-bootstrapbootstrap-4

What is the Best Way to Align Footer Text on both the Right and Left sides?

I'm having trouble aligning text on both sides of my footer. The text on the right keeps falling to the next line, and I want it to be on the same line as the text on the left. Any suggestions or tips would be greatly appreciated! Thank you in advance ...

htmlcss

Troubles with concealing dropdown menu when hovering

I have noticed that this issue has been raised before, but none of the solutions provided seem to fix my problem specifically. The submenu in my menu is not functioning as intended. It should be displayed when hovered over and hidden when not being hovere ...

javascripthtmlcss

Show a 1920x1170 / 183KB image as the background using CSS styling

I need help with displaying a background image that is 1920x1170 pixels and has a file size of 183KB. Here is the code I am using: .bground{ height:auto; left:0; position:fixed; top:0; width:100%; } <div class="bgrou ...

css

Navigate to a hyperlink using an HTML tag on an Android device

Hi there, I have an HTML string that includes a tag with a href attribute. After setting this HTML string in a text view on Android, I want only the tag with the href attribute to be clickable and redirect to the appropriate link. Can someone please advise ...

androidhtmlandroid-studio

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

javascriptcss