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

What is the best way to design a Global Navigation menu for websites?

Show the input from one HTML form on a different HTML form

The head tag specification doesn't properly include the CSS file reference

Experiencing repeated triggering of ng-change on 'range' input in Chrome

Is there a way I can detect a browser timeout and display a custom error message?

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

Changing the text link color on IOS can be achieved by modifying the CSS properties

Unable to align text in the middle of the header

What are your thoughts on combining a JSON object with HTML?

"Utilizing the owl carousel to dynamically adjust the height of various images and fill

ClickEvent (or element selector) is experiencing functionality issues

The data in MongoDB is organized using unique identifiers called ObjectId

Center the p tag vertically

Discover the content of meta tags using Python and Beautiful Soup

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

What is the most effective method for coding an input tag with specific restricted characters?

Sophisticated Arrangement of Div Elements

"JQuery's selector is failing to locate elements once they have been loaded through an

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

Using html-mode in emacs to create a hyperlink