CSS transition not functioning properly on a concealed div

I'm trying to make a hidden div appear and disappear smoothly using CSS, but it's not working. Can anyone help me understand what the issue might be?

Here's the HTML code:

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

And here's the CSS code:

.box {
    width: 500px;
    border: 1px solid #ccc;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    visibility: visible;
    transition: height 0.1s ease;
    height: auto;
}

If you want to check out the code in action, you can visit this Fiddle Work link.

htmlcsscss-transitions

Answer №1

For a seamless transition during hover events, consider utilizing jQuery with the following code snippet:

jQuery

$('.a p').hover(function () {
    if ($('.box').hasClass('active')) {
        $('.box').removeClass('active');
        $('.box').stop(true, false).animate({height: "0px"}, 500);
    } else {
        $('.box').addClass('active');
        $('.box').stop(true, false).animate({height: "20px"}, 500);
    }
});

Check out this jsFiddle demo

Answer №2

Consider using opacity as an alternative: 

.container {
    width: 600px;
    border: 1px solid #333;
    opacity:0;
    height: 0;
    overflow: hidden;
}
:hover .container {
    opacity:1;
    transition: height 0.2s ease-in-out;
    transition-property: opacity;
    height: auto;
}

http://example.com/3nT84/

Answer №3

http://jsfiddle.net/k9uza/8/

Ensuring compatibility across different browsers is important...

.container {
    width: 150px;
    height: 250px;
}
.wrapper {
    width: 100%;
    border: 2px solid #333;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
.container:hover .wrapper {
    max-height: 500px;
    opacity: 1;
}

By the way, using a class name like "container" may be more conventional. It's worth noting that the box height is fixed in this example, providing good support for variable heights.

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

The outcomes may vary even with identical fonts, character spacing, and line-height

When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged: HTML: <div> T ...

htmlcss

Could someone help me understand why my div elements are auto-indenting after the initial row?

Encountering a rather peculiar issue here. It's worth mentioning that I am using Shopify, which has been known to cause some odd problems in the past. Currently, I am working on this page for coding purposes (though not the final placement) - On thi ...

htmlcss

padding is increasing the overall size of the div element

I have been working with the following code: <div class="main"> <div class="babyOne"> </div> <div class="babyTwo"> </div> </div> .main{ width:100%; position:relative; } .babyOne,.badyTwo{ width:50%; float:left; } Ever ...

htmlcss

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

Prevent sibling divs from being affected by onClick events in React

Currently, I am facing an issue with changing the className of a specific div element when clicked. Whenever I click on one div, the classNames of all the div elements change. This problem arose from converting a vanilla JS concept into a React component. ...

cssreactjsonclickdom-events

Creating an HTML file with embedded PHP syntax

It seems like what I'm attempting to achieve may be seen as impossible, incredibly challenging, or potentially simple, but I am struggling to articulate my intentions effectively to Google. My goal is the following: For templating purposes, I need t ...

phphtmltemplatesfile-iotags

"Utilizing the POST REDIRECT GET approach within a form that submits to itself helps prevent duplicate entries from

Struggling with grasping the fundamentals of the POST REDIRECT GET pattern in forms that submit to themselves has been one of the toughest challenges I've faced. The issue arises when a user goes back or refreshes the page, leading to duplicate entrie ...

phphtmlforms

Positioning of Buttons in Bootstrap 4 Forms

Hey there, I'm encountering an issue with the placement of my button on my website <form id="filter_view" method="POST"> {% csrf_token %} <div class="form-row"> <div class="form-group col-md-1"> <label for="sel ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way for me to slice a semicircular shape out of the parent div in order to expose

Does anyone have a solution for removing a half circle div from its parent (footer) to reveal the background underneath? I've searched for canvas and jQuery solutions but haven't found anything that works. I am aiming to achieve something simil ...

javascriptjquerycss

Unforeseen box model quirks found in modern browsers when styling <table> elements

Here is a sample HTML document that demonstrates the issue: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; ...

htmlcss

Utilizing PHP and MySQL to Link a Checkbox with a Dropdown Menu

I am encountering an obstacle when trying to include a "quantity" field for products in an order. The setup includes a Products table, an Orders table, and an Order_Item table (which serves as a many-to-many relationship linking the ids of both products an ...

phpmysqlhtmldrop-down-menuassociative-array

Execute function during page loading with and without the use of an update panel

Let's consider the following scenario: I have a situation where some pages use a master page. Some of these pages contain an update panel while others do not. I have a jQuery code that needs to be executed when a user triggers the keydown event. $(d ...

javascriptc#jquerycssasp.net

Is there a way to open multiple modals from various product tiles that share the same DOM structure?

I have implemented a customized boostrap modal in a single product on the PLP of my site. The HTML for this modal is as follows: <div class="modal size-variants fade pr-0" id="tumbler-size-modals" role="dialog"> <div class="modal-dial ...

htmlcsssassbootstrap-4

What is the best way to incorporate a URL link in Java while utilizing a CSS element?

Below is the provided code snippet: <span class='maincaptionsmall'> Test </span> Due to certain constraints in my page related to ajax and jquery scripts, I am unable to use HREF as a link. In other words, I can't implement som ...

javascripthtmlcssajaxlocation-href

Customized Quick Access MUI

Hey there! I'm currently working with the Speed ​​dial component for MUI and I'm having trouble figuring out how to style the tooltipTytle. I can only seem to style them when they are all displayed at once, but that's not what I want. I ...

cssreactjssassmaterial-ui

positioning two out of three items in a navigation menu to the right and the remaining one to the left

I am looking to design a navigation bar that spans the full width of the screen, with the logo on the left side serving as a link back to the home page. Additionally, I want to include elements for register/login and cart. The background color should cove ...

csshtml

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

An adaptive Bootstrap grid that collapses and changes based on screen dimensions

Currently, I am in the process of creating a collapsible grid using Bootstrap to display details for each item: If you would like to see a visual representation of the concept, click here. To assist in my project, I have been referring to a helpful threa ...

htmlbootstrap-4

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

Manipulating a selected option using JavaScript

///////////////////////////////////////////////////////////////////////////// Below is the code I've written, and when I click the button to display the output from the function, nothing appears. Sample HTML Code <!DOCTYPE html> <html> ...

javascripthtml