Search code examples
csstextpositioning

Text fiting inside element issue in css

How can I make text inside .inside-ob-u which appers after hovering .ob-nth2 not to do 'fitting process' as shown :

As is possible to clearly see the text is fitting when the height and width change is in the process.

How can I do it without absolute position or disabling transition? Works well if I do so.

https://jsfiddle.net/daf7a509/

Solution

  • You could use transform: scale(x). The nice thing is that scale doesn't change the space taken up by the element -> the other elements don't move.

    https://jsfiddle.net/am7m384d/

    EDIT:

    [...] but it also affects the content (childs) and mess things up. – user3734782

    You could set the size of .box__hover to the size it should have when being hovered and scale it down when it is not hovered (for the transition). Then the children would have their correct size.

    Here is an adapted fiddle: https://jsfiddle.net/b7w40gtp/