jQuery overlay fluctuation

Having a flickering and fading issue with an image overlay, I suspect it might be related to the css loading the overlay and then jQuery triggering?

.Image-Overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.8);
    z-index: 100;
    display: none;
    position: absolute;
    top: 0;
    cursor: pointer; 
    color: #fff;
    box-sizing: border-box;  
    padding: 20px;
}

<div class="column xsmall-12 small-6 medium-3 overlay">
    <img src="<?php echo get_template_directory_uri(); ?>
    /img/insidePages/Layer90.jpg" alt="Kenya" />
    <div class="Image-Overlay">
        <p>content on overlay</p>
    </div>
    <h2>Title</h2>
</div>


$('.overlay').mouseenter(function () {
    $('.Image-Overlay', this).fadeIn('slow');
}).mouseleave(function () {
    $('.Image-Overlay', this).fadeOut('fast');
});

I was hoping for a sliding effect on hover but after checking the jQuery website, the effect doesn't seem to be working as expected. Any insights on what could be the issue?

jqueryhtmlcss

Answer №1

Do you need a solution similar to this?

Check out the demo

$('.overlay').on('mouseover', function () {
    $('.Image-Overlay', this).slideDown('fast');
}).on('mouseout', function () {
    $('.Image-Overlay', this).slideUp('fast');
});

Answer №2

Why not consider using the hover function instead of mouseenter and mouseleave?

$('.overlay').hover(function () {
    $('.Image-Overlay', this).fadeIn('slow');
}, function () {
    $('.Image-Overlay', this).fadeOut('fast');
});

If you're experiencing flickering, it could be happening on mouseleave.

By using the hover function, you can achieve the same result with just one function instead of two!

Answer №3

Give this a shot


    $( ".overlay" ).mouseover(function() {
$('.Image-Overlay').fadeIn('slow');
}).mouseleave(function () {
    $('.Image-Overlay').fadeOut('fast');
});

Answer №4

It's possible that what you're seeking or mentioning is related to a scenario where rapidly repeating the mouseenter/mouseleave action causes the fadein/fadeout effect to trigger multiple times, resulting in rapid blinking. To address this issue, it would be advisable to incorporate the use of the `stop` function as a preventive measure.

$('.overlay').mouseenter(function () {
    $('.Image-Overlay', this).stop(true,true).fadeIn('slow');
}).mouseleave(function () {
    $('.Image-Overlay', this).stop(true,true).fadeOut('fast');
});

Answer №5

To achieve this effect, I recommend utilizing CSS Animations.

.Image-Overlay {
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0, 0.8);
 z-index: 100;
 position: absolute;
 bottom: 100%;
 cursor: pointer; 
 color: #fff;
 box-sizing: border-box;  
 padding: 20px;

 // You can replace 'bottom' with any other property that has a numeric value
 // Animation for sliding out
 transition: bottom 500ms ease-out;
 -webkit-transition: bottom 500ms ease-out;
}

.overlay:hover .Image-Overlay{
 bottom: 0;

 // Animation for sliding in
 transition: bottom 200ms ease-out;
 -webkit-transition: bottom 200ms ease-out;
}

This implementation will result in something similar to the following example: http://jsfiddle.net/Lwrj6y31/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

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Tips for extracting information from a select box that is dynamically populating

I have a dropdown menu displayed in the image below. It contains a "More..." option that, when clicked, loads the next ten data items. Subsequent clicks on "More" will load another set of ten data items each time until the entire list is loaded. How can I ...

javascriptjavajqueryseleniumdrop-down-menu

Identify the month in which there is no data available in the database

The existing query is working perfectly, but the issue is that there is no data for the current month (April), causing it not to list the month with 0 interviews. How can I make it so that the month is listed with 0 interviews? QUERY select distinct from ...

phphtmlmysqlsql

Compatible with pure vanilla JavaScript, but not jQuery

I am currently facing an issue with attaching VKI (Virtual Keyboard Interface) to an element that is dynamically added to the DOM using JavaScript. The scenario involves a table with initially only one row, along with "Add Row" and "Delete Row" functionali ...

javascriptjqueryhtml

The background color is not displaying correctly on the <div> element

body { background-color: #FFFDEC; } .header { position: fixed; top: 0; left: 0; height: 50px; width: 100%; background-color: #04A7A6; margin: 0; display: block; z-index: 10; } .headermenu { xposition: fixed; ...

htmlcssbackground-color

Expand the space between each pair of rows within a table

After implementing the code below: HTML <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td ...

htmlcssangular

How do you prevent the width of small images from exceeding their original size when setting a max-width in CSS?

Using SCSS/bootstrap 4.5 in my HTML, I have set a maximum width of 250px for images with a specific class. max-width: 250px; height: auto; While this works fine for larger images, smaller ones end up looking distorted... Is there a way to prevent small i ...

cssbootstrap-4

Is it possible to create a fluid-width layout with two columns that also spans the full

I have searched tirelessly through Google and stackoverflow, but I can't seem to find a solution to my specific problem. I need help creating a container div that can hold either one or two columns. The content is generated by a CMS and may or may not ...

csshtmlcss-floatheightwidth

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

limitations prevent accessing full content of parent div with .html() function

Currently, I am facing an issue where the `.html()` function in jQuery is not returning the complete content of a div. There are approximately 28 divs, each containing a large amount of data, but when I use the `.html()` function, it only returns 18 divs. ...

jqueryhtmljspdf

Tips for positioning the text and icon within a tag nestled in a paragraph tag?

Need help aligning text and icons inside paragraph tags on a tag. Here is the HTML code I'm currently using: <div class="application-intro"> <p><a class="btn" href=""><i clas ...

htmlcssbootstrap-4

Align the label vertically with the corresponding input field

I am currently in the process of revamping an old HTML form to eliminate the use of tables. I found a solution on this site to give the label a fixed width, and here is how it looks in the current code: HTML <div id="form"> <label for="field ...

htmlcssvertical-alignment

`Incorporating width and vertical alignment in an image`

I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation. Check out my Example Site Unfortunately, I can't seem to ...

htmlcsszurb-foundation

Submitting an Ajax form to dual scripts

My goal is to pass variables from a single form to two separate php scripts for processing upon submission. The current setup that I have seems to be working fine, but I'm curious if there is a way to achieve this within one jQuery script instead of d ...

javascriptphpjqueryajax

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Hello community, I am currently working on implementing a custom styled drawer within a flexbox container using the styled-engine-sc. I started with a template and tried to convert it into styled-components. Here is the source: https://codesandbox.io/s/vm ...

cssreactjsmaterial-uistyled-components

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

What could be the reason for a jQuery script failing to execute when included in a PHP include statement from a different PHP page?

I'm currently working with javascript and php to manage cookies across different pages. On one page, I have a script that sets a value in a cookie variable and I want to retrieve that value on another page. Let's say the first page is named page1 ...

javascriptphpjqueryhtml

Check the price, such as 30 Lac vs 3 Cr

I am currently implementing a filter in one of my projects as shown below: <select id="drpPrice" name="Price"> <option value="">Price</option> <option value="1">< 30 Lacs </option> <option value="2">< 50 Lac ...

javascriptjqueryasp.net

The use of absolute positioning in conjunction with overflow:hidden

<div id="container" style="overflow:hidden; position:relative;"> <div id="content" style="position:absolute;"> </div> </div> Is it possible to display the content element which is larger than its parent container, while still k ...

htmlcss

Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...

htmlcss