CODEWITHSUNDEEP
htmlcsscss-animations
Runtime Terror
Runtime Terror

Reputation: 6742

Center image in css animation

I have an image which on hover animates size and position. The problem is that the image is not centered after hovering. The animation what I want to achieve is on hover animate the logo to top center and scale down.

.col-4 {
    float: left;
    width: 25%;
    position: relative;
    overflow: hidden;
}

.col-4 img.bg {
    width: 100%;
    -webkit-transition: .5s;
    transition: .5s;
}

.col-4:hover img.bg {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.col-4 .logo {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.col-4:hover .logo {
    top: 10%;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}

.col-4 .logo img {
    width: 100%;
}

.overlay-bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.col-4:hover .overlay-bg {
    background: rgba(0, 0, 0, 0);
}
    <div class="row">
    
        <div class="col-4">
            <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " />
            <div class="logo">
                <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " />
            </div>
            <span class="overlay-bg"></span>
        </div>
        <div class="col-4">
            <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " />
            <div class="logo">
                <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " />
            </div>
            <span class="overlay-bg"></span>
        </div>
        <div class="col-4">
            <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " />
            <div class="logo">
                <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " />
            </div>
            <span class="overlay-bg"></span>
        </div>
        <div class="col-4">
            <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " />
            <div class="logo">
                <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " />
            </div>
            <span class="overlay-bg"></span>
        </div>
        
    </div>

Jsfiddle link:

http://jsfiddle.net/357bz53c

Upvotes: 1

Views: 2465

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Try this:

.col-4 {
    float: left;
    width: 25%;
    position: relative;
    overflow: hidden;
}

    .col-4 img.bg {
        width: 100%;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

        .col-4:hover img.bg {
            -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
            transform: scale(1.5);
        }

    .col-4 .logo {
        position: absolute;
        width: 50%;
        top: 25%;
        left: 25%;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

        .col-4:hover .logo {
            top: 0;
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            transform: scale(0.5);
        }

        .col-4 .logo img {
            width: 100%;
        }

.overlay-bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

        .col-4:hover .overlay-bg {
            background: rgba(0, 0, 0, 0);
        }
<div class="row">
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
</div>

Upvotes: 1

Related Questions