Exciting transition effect for font sizes in CSS

Question

Exciting transition effect for font sizes in CSS

Issue:

Hover over the X and wait for the div to collapse completely.
Move away from the X
Notice how the div jumps to the bottom and then back up.

Inquiry:

How can I prevent text wrapping while expanding the div during animation? (Currently using delayed font-size, which is causing issues).

Limitations:

These constraints are in place due to the broader design of this snippet.

Cannot disable wrapping on the outer div (except during the animation).
Unable to set fixed width or height to the inner div.
No use of JS allowed.

Additional Information:

For the hover state, I am utilizing white-space:nowrap to prevent text wrapping while collapsing the div. Then, a delayed font-size transition is used to avoid text wrapping while expanding the div again (since animating white-space or display is not feasible). It seems like the font-size of 0 is momentarily lost at the beginning of the animation, explaining the initial jump.

.outer {
  width: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}

.button {
  padding: 0px 10px;
  display:inline-block;
}

.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner {
  font-size: 15px;
  display:inline-block;
  transition: font-size 0s 2s;
}

.outer:hover .inner {
  font-size: 0px;
}

<div class="outer">
<div class="button">
X
</div>
<div class="inner"> 
This is the variable content of the box
</div>
</div>

html css css-transitions

Answer 1

Answer №1

Here are some styling options you can apply:

Include line-height: 22px; in the CSS for .outer .inner.
Also, add height: 22px; to the CSS for .outer.

.outer {
  width: 300px;
  height: 22px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}

.button {
  padding: 0px 10px;
  display:inline-block;
}

.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner {
  font-size: 15px;
  line-height: 22px;
  display:inline-block;
  transition: font-size 0s 2s;
}

.outer:hover .inner {
  font-size: 0px;
}

<div class="outer">
<div class="button">
X
</div>
<div class="inner"> 
This is the variable content of the box
</div>
</div>

Answer 2

Here are some styling options you can apply:

Include line-height: 22px; in the CSS for .outer .inner.
Also, add height: 22px; to the CSS for .outer.

.outer {
  width: 300px;
  height: 22px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}

.button {
  padding: 0px 10px;
  display:inline-block;
}

.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner {
  font-size: 15px;
  line-height: 22px;
  display:inline-block;
  transition: font-size 0s 2s;
}

.outer:hover .inner {
  font-size: 0px;
}

<div class="outer">
<div class="button">
X
</div>
<div class="inner"> 
This is the variable content of the box
</div>
</div>

Answer 3

Answer №2

.container {
  width: 300px;
  overflow: hidden;
  border: 1px solid blue;
  transition: width 2s;
}
.button {
  padding: 0px 10px;
  display: inline-block;
  float: left;
  line-height: 1;
}
.container:hover {
  width: 30px;
  white-space: nowrap;
}
.container .inner p {
  font-size: 15px;
  display: inline-block;
  float: left;
  transition: all ease-in-out 2s;
  line-height: 1;
  margin: 0;
}
.container:hover .inner p {
  font-size: 0px;
  transition: all ease-in-out 1s;
}

<div class="container">
  <div class="button">
    X
  </div>
  <div class="inner">
    <p>This is the dynamic content within the element</p>
  </div>
</div>

focus on the paragraph, update the transition to all.

Answer 4

.container {
  width: 300px;
  overflow: hidden;
  border: 1px solid blue;
  transition: width 2s;
}
.button {
  padding: 0px 10px;
  display: inline-block;
  float: left;
  line-height: 1;
}
.container:hover {
  width: 30px;
  white-space: nowrap;
}
.container .inner p {
  font-size: 15px;
  display: inline-block;
  float: left;
  transition: all ease-in-out 2s;
  line-height: 1;
  margin: 0;
}
.container:hover .inner p {
  font-size: 0px;
  transition: all ease-in-out 1s;
}

<div class="container">
  <div class="button">
    X
  </div>
  <div class="inner">
    <p>This is the dynamic content within the element</p>
  </div>
</div>

focus on the paragraph, update the transition to all.

Answer 5

Answer №3

Encountering issues when resizing an object on hover is a common problem. One workaround is to use a parent container for hovering, which covers the width of the element and may introduce a slight ghosting effect. However, this approach tends to be cleaner than the visual effects of the original solution.

The constraints in your list make it challenging to find a solution. To address this under these specific conditions, consider making the button an element that does not disrupt the document flow within your container to avoid wrapping. Here are various attempts, one of which may hopefully meet your requirements:

Optimal Solution with All Constraints Met, Utilizing white-space

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
  white-space: nowrap;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      This is the variable content of the box
    </div>
  </div>
</div>

Effective Solution Aligned with Constraints, Changing Markup to Utilize pre

To prevent wrapping, incorporate a pre element into the solution as it inherits the white-space: pre property from its default style.

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}
pre {
  font-family: inherit;
  margin: 0;
}

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      <pre>This is the variable content of the box</pre>
    </div>
  </div>
</div>

Innovative Approach to Overcoming Wrapping Issue

If you prefer not to use white-space, another option is replacing all whitespaces in the inner div with non-breaking spaces to ensure that wrapping is avoided entirely:

<div class="inner">
  This is the variable content of the box
</div>

Answer 6

Encountering issues when resizing an object on hover is a common problem. One workaround is to use a parent container for hovering, which covers the width of the element and may introduce a slight ghosting effect. However, this approach tends to be cleaner than the visual effects of the original solution.

The constraints in your list make it challenging to find a solution. To address this under these specific conditions, consider making the button an element that does not disrupt the document flow within your container to avoid wrapping. Here are various attempts, one of which may hopefully meet your requirements:

Optimal Solution with All Constraints Met, Utilizing white-space

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
  white-space: nowrap;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      This is the variable content of the box
    </div>
  </div>
</div>

Effective Solution Aligned with Constraints, Changing Markup to Utilize pre

To prevent wrapping, incorporate a pre element into the solution as it inherits the white-space: pre property from its default style.

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}
pre {
  font-family: inherit;
  margin: 0;
}

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      <pre>This is the variable content of the box</pre>
    </div>
  </div>
</div>

Innovative Approach to Overcoming Wrapping Issue

If you prefer not to use white-space, another option is replacing all whitespaces in the inner div with non-breaking spaces to ensure that wrapping is avoided entirely:

<div class="inner">
  This is the variable content of the box
</div>

Exciting transition effect for font sizes in CSS

Answer №1

Answer №2

Answer №3

Similar questions

Simultaneous display of icon and text on Bootstrap toggle button

Troubles with CSS in MUI Component Integration

The processing indicator fails to function properly when trying to refresh a jQuery datatable

Using Rowspan in Bootstrap 4 Beta 0 Grid System

Guide on utilizing multiple ng-apps alongside multiple controllers

Safari experiencing a CSS issue not found in Chrome or Firefox

Tips for containing a moving element within the boundaries of its container div

Tips for adjusting the color of multi-line text when hovering with the mouse

Stop CSS tooltip from overflowing outside of the page or window

Omit a certain td element from the querySelectorAll results

Navigating with hashtags in Angular2 and anchors does not change the page position

Is there a way to initiate an Edge animation when an onclick event occurs?

Do double forward-slash comments work in CSS code?

Make sure all of the inner tags are properly contained within their respective containers

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

Utilize a single image to encompass the entire background/theme

Content on the page is not fully visible on mobile devices when the Right-to-Left attribute is applied

Interactive Geography Selector

Struggling to click on a link while viewing the site on your mobile device?

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL