css 动画中的中心图像

Question

我有一张图片，悬停时会显示尺寸和位置的动画。问题是图像在悬停后没有居中。我想要实现的动画是悬停时将徽标动画化到顶部中心并缩小。

.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

Answer 1

尝试 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>

css 动画中的中心图像

Center image in css animation

html

css

css-animations