How to make a div expand to full width using CSS animations

Issue with Div Animation

I am currently facing an issue where I am trying to animate a div to expand to 100% of its child's width on hover. However, the animation is not working smoothly as expected. Instead of gradually expanding to the right, the div is abruptly shifting. Can anyone identify why the animation is not behaving correctly? I would like to achieve this effect without using JavaScript if possible.

My Code Attempt

I have replicated the code from the following fiddle:

http://jsfiddle.net/tVHYg/1662/

and implemented it in the source below: 

.contents {
                white-space:nowrap;
                display:inline-block;
            }

            .inner {
                background:#c3c;
                width: 100%;
                max-width:50px;

                overflow:hidden;
                transition: all .3s ease-in-out;
                padding: 5px 0 5px 0;
            }

            .contents:hover .inner {
                max-width:100%;
            }
<div class="contents">
                <div class="inner">A bit of text never hurt anyone</div>
            </div>

            <div class="contents">
                <div class="inner">A bit of text never hurt anyone</div>
            </div>

htmlcssanimation

Answer №1

The issue lies in the percentage values used in your code, specifically because you have set width: 100%; along with max-width: 50px; for the inner class.

By using pixels instead of percentages, the problem can be resolved. Any excess pixels beyond the box size will simply speed up the animation, for example, setting max-width: 1000px; will accelerate the animation without increasing the box boundaries.

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .5s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:1250px;
}
    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

Answer №2

To achieve this effect, just use display: inline-flex

.container {
  display: inline-flex;
}

.contents {
  display: inline-flex;
  transition: all .3s ease-in;
  overflow: hidden;
  width: 50px;
  margin: 2px;
}

.inner {
  background:#c3c;
  white-space:nowrap;
  padding: 10px 0;
}

.contents:hover {
  transition-delay: 0.2s;
  width: 100%;
}
<div class="container">
  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>

  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>
</div>

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

Flask url_for usage done wrong

Running a flask server serves HTML pages with scripts stored in the static folder. An example script included in the header is: <script src="{{url_for('static', filename='js/viewer.js')}}"></script> The GET reques ...

javascripthtmlflasknicegui

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

jqueryhtmlcss

Input field in a tableview

I have a ListView that features a dropdown, 4 textboxes and buttons. My goal is to only show the fourth textbox (enclosed in a span) when the dropdown value in each row of the ListView is set to 2. For instance, if there are 5 records being displayed in t ...

javascriptasp.nethtmllistviewtextbox

Go to a different page section using MUI 5

I am currently working on a React application and I want to implement a functionality where pressing a button on my Nav Bar will navigate to a specific section on the first page. To achieve this, I have created an onClick function for my button: const onNa ...

javascripthtmlcssreactjsmaterial-ui

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...

htmlcsswebstorm

Recursive PHP function to create a category tree structure

I am facing an issue while trying to create a table of categories through recursive iteration of an array. The table generation works well when the depth increases, however, there seems to be a problem with the HTML output when the depth decreases. Below ...

phphtmlarraysrecursiontree

Moving draggable items out of a div and placing them into a designated droppable area

I'm facing an issue with dynamically creating draggable "divs" within a "table" and trying to make them drop into multiple droppable areas. The problem is that when I drag the element, it leaves a gap and upon dropping, it lands in multiple places ins ...

jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder

Tips for broadcasting the blob

I am currently working on a radio system project that involves streaming live audio from a microphone to the user in real-time. However, I am new to using node.js and unsure of how to achieve this. Can anyone provide guidance on how to stream the audio fro ...

javascripthtmlnode.js

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

javascripthtmlnode.jsexpresshbs

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

javascripthtmlformattingline-breaks

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Revealing child elements by expanding the absolute div from the center

I am trying to create a rectangular mask that expands on hover to display its children with varying heights. Currently, I have achieved this using an absolutely positioned div that adjusts its left, width, and max-height properties. However, I would like i ...

htmlcssabsolute

The CSS focus-within and hover properties are not functioning as expected

How can I make the search tags visible (the buttons above the text input field) when the search bar below them is clicked? I've tried using :hover, :focus, and :focus-within, but none of them seem to be working. Can someone help me figure out the issu ...

htmlcsscss-selectorshoverfocus

The PrimeNG Tree component offers a range of unique features

Encountering an issue with the PrimeNG tree in angular2 Let's take a look at the code snippet from product_tree.component.ts : constructor(private http: HttpClient, private productsService: ProductsService) { this.productsService.getProductsClasse ...

htmlangularprimeng

Display the JQuery element that contains a child element with a specified class

On my webpage, I have a dropdown menu (ul) and I want to keep it open when the user is on the page. Specifically, I only want to display the ul item if it contains an li element with the class ".current-menu-item". The code snippet below accomplishes this ...

javascriptjquerycssdrop-down-menushow-hide