Disappear Image Overlay when Mouse Hovers

Currently, I am in the process of working on a new webpage. You can view the progress at the following link: . When hovering over the Referrals Button, a Background Overlay will appear. To enhance the visual effect, I am looking to implement a gradual appearance, possibly through a Fade in or out animation.

I have incorporated the following script to manage the Overlay animation.

<script type="text/javascript">
(function(){
   $('#coins').on('mouseenter', function(){
          var w = $(window).width();
          var h = $(window).height();
      $('<div></div>').appendTo('body').
               addClass('overlay').css({ 'width': w, 'height': h });
      }).on('mouseleave', function(){
      $('.overlay').remove();
      })                
})();
</script>

Answer №1

You have the power to achieve this using only CSS! ;)

With the magic of CSS3 Transition, you can dictate the duration of the transition for each property, set a delay if needed, and even choose the type of transition (although the default is ease).

Keep in mind that CSS3 Transition won't animate changes in Display or Visibility. For those elements, you'll need to get creative with techniques like adjusting the height to 0px or shifting them out of view, changing z-index, or the most suitable option - using Opacity.

Start by setting opacity: 0; and transitioning to opacity: 1; on hover.

In your scenario:

.button-hover ul ul {
  min-width: 449px;
  position: absolute;
  right: 0;
  top: 80%;
  z-index: 598;

  transition: all 1s ease 0s; /* newly added */
  opacity: 0; /* newly added */
  /* visibility: hidden; -> removed */
}

And for :hover, instead of

.button-hover ul li:hover > ul{
    visibility: visible;
}

opt for

.button-hover ul li:hover > ul{
    opacity: 1;
}

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

Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example: <html> <head> <style shim-shadowdom> .mylink /deep/ {col ...

What is the best method for showing information beneath each tab?

Here is my CodePen link: https://codepen.io/santoshch/pen/MWpYdXK .tab1border{ border-right: 2px solid #f0f0f0; } .tab2border{ border-right: 2px solid #f0f0f0; } .tab3border{ border-right: 2px solid #f0f0f0; } .tab4border{ border-right: 2px soli ...

Is it possible to prevent a webpage from being refreshed?

I need help with an HTML page that puts the worker on pause time which will be subtracted from his/her day job. The issue is that when he/she refreshes the page, the timer starts from the beginning automatically. I want it to continue without resetting. Is ...

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...

Overriding the !important declaration in inline styles within various CSS IDs and classes

I need to find a way to override an inline !important declaration that is nested inside multiple CSS ids and classes. Let's analyze the following situation: <div class="A"> <div class="B"> <div class="C"> < ...

Combining input elements and captchas in one line within Bootstrap

I am currently working on a form group that includes a label, a captcha image, and an input field for the captcha code. My goal is to have the label positioned at the top of the form group, with the captcha image and input field aligned in one line. I have ...

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

I require limitless onclick functionality, but unfortunately, transitions are not functioning as expected

I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed... The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle mul ...

Separate line rendering of checkboxes in CSS and Vue

I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...

What is the method for calculating the 100% width of a flex child?

Adjusting the width of the .sidebar to 100% seems to make it smaller in size. Interestingly, removing the body's font-size: 1.3rem and toggling the .sidebar's width: 100% results in a slightly larger appearance. It is expected that setting the ...

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

Ways to position one div below another div

I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...

Is there a way to effectively overwrite CSS styles when utilizing @extend with another class in SCSS?

Here is some SCSS code I am working with: .a { height: 100px; width: 100px; } .b { @extend .a; height: 200px; } After compiling, the CSS appears as follows: .a, .b { height: 100px; width: 100px; } .b { height: 200px; } Whe ...

"Picture positioned on the edge of the container, just on one

Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after an ...

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

troubleshooting responsive design issues with Bootstrap and PHP

this is the issue I'm facing and what I require: Please provide assistance with fixing the code for my website project. What exactly is the problem and how can it be resolved? Thank you. <?php include 'init.php'; $stmt = $con->prepar ...

What is the best way to ensure a grid remains at 100% width when resizing a browser window?

Within the div element, I have two child divs. One has the class col-md-2 and the other has the class col-md-10.Check out a sample view here In the image provided, the div containing hyperlinks (Database edit, invoice, preview) is not taking up 100% width ...

Guide on aligning text along a baseline

CLICK HERE TO ENTER THE INTERACTIVE PLAYGROUND HTML: <div class="first">Text A</div> <div class="second">Text B</div> CSS: div { background-color: rgba(255, 0, 0, 0.3); /* For visualization only */ margin-top: 50px; ...

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

I am trying to figure out how to create two vertical divs that stay the same size and height when the browser is not on full screen. I want users to be able to use the body's overflow scroll function to read both DIV elements along the x and y-axis. ...