CODEWITHSUNDEEP
cssscalecss-transforms
supernova
supernova

Reputation: 127

Transform: scale() not transforming from center

When I hover, it scales perfectly but the logo moves up a little bit. I tried transform-origin: center (even though that is the default) and nothing changed.

HTML

<div class="portfolio-projects">
    <div class="project">
        <img src="#" alt="">
    </div>
</div>

CSS

portfolio-projects {
    display: grid;
    grid-gap: 50px;
    margin: 50px 0;
    max-width: 1050px;

.project {
    position: relative;
    cursor: pointer;
    background-color: $gray;
    max-width: 500px;
    height: 325px;
    overflow: hidden;
}

img {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-35%) scale(.8);
    transition: .2s;
}

.project:hover {
    img {
        transform: translate(-50%,-50%) scale(.9);
    }
}

Upvotes: 0

Views: 1436

Answers (1)

supernova
supernova

Reputation: 127

Wow. So I just needed to change it to this

.project:hover {
    img {
        transform: translate(-50%,-35%) scale(.9);
    }
}

I forgot to adjust the hover after adjust the original value.

Upvotes: 0

Related Questions