• Locked
No replies
Wed, 2020-05-06 20:38
Mehnock
Mehnock's picture
Offline
newbie
South Florida
Last seen: 2 years 46 weeks ago
South Florida
Timezone: GMT-4
Joined: 2020-05-06
Posts: 1
Points: 2

Hello, this is my first post! Great site!

I am stuck with stretched text as a result of applying transform: scaleY(2).

I have the following html:

<div class="item-box">
    <div class="category-item">
        <h2 class="title">
            <a href="#" title="Show product">
                label
            </a>
        </h2>
        <div class="picture">
            <a href="#" title="Show product">
                <img alt="Picture for product" src="path" title="Show product">
            </a>
        </div>
    </div>
</div>

And the CSS:

.title {
    transition: all 0.6s ease 0.1s;
}
.item-box:hover .title {
    background-color: rgba(0, 0, 0, 0.60);
    transform: scaleY(2) translateY(-12px);
}

This results in vertically stretched text.

Is there a way to prevent the scaling of the text or to reverse the stretching?

Top
Tags: