CODEWITHSUNDEEP
htmlcsscss-transitions
user3469061
user3469061

Reputation: 21

Squash text horizontally (make the font inside <p> narrower but same height)

I have some text inside p/p.

as the mouse hovers over the p, I make the p's width slightly less ( with transitions).

I want the text to shrink along with the containing div, but not proportionally.

I want the effect to look like something is coming in from the side, to squash the p...like a press on some molten plastic.

So, what would happen in real life is the stuff inside gets squashed - dimension in one direction decreases and increases in the other dimension....I want the text to shrink in one direction and stay the same in the offer, though.

I want the width of each letter to decreases and the height to remain the same.

changing font size does not achieve this - font gets smaller in both dimensions.

Is there a simple CSS trick which I can put in the same CSS transition as the width of the div.

<p>HELLO HELLO HELLO wejdf wekf ewufkgewlf ewtfgwef weulf </p>

div{
width: 100px;
transition: width 0.5s;
}

p{
font-size:14px;
transition: font-size (or something) 0.5s;
}

div:hover{
width:700px;
}

div:hover p{
some css 
}

Thanks

Upvotes: 1

Views: 1282

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could do it like this:

div {
    padding: 20px 20px;
    text-align: center;
    background: #0F0;
    display: inline-block;
}
p {
    font-size: 24px;
    letter-spacing: 4px;
    transition: letter-spacing 0.5s ease;
}
p:hover {
    letter-spacing: 0px;
}
<div><p>HELLO HELLO HELLO</p></div>

Solution 2:

div {
    padding: 20px 20px;
    text-align: center;
    background: #0F0;
    display: inline-block;
}
p {
    font-size: 24px;
    transition: word-spacing 0.5s ease;
}
p:hover {
    word-spacing: -4px;
}
<div><p>HELLO HELLO HELLO</p></div>

Upvotes: 2

Related Questions