css动画中的中心图像答案

【问题标题】：Center image in css animationcss动画中的中心图像
【发布时间】：2015-08-15 19:35:56
【问题描述】：

我有一个悬停动画大小和位置的图像。问题是悬停后图像未居中。我想要实现的动画是悬停动画徽标到顶部中心并缩小。

.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 链接：

http://jsfiddle.net/357bz53c

【问题讨论】：

我似乎无法重现此问题。你能发布浏览器规格吗？

标签： html css css-animations

【解决方案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>

【讨论】：