如何配置基于不透明度的CSS覆盖以不影响周围元素的间距？

Question

好的，我有以下代码：https://jsfiddle.net/7u1aLxaw/

所以问题是，当你悬停在图像上时，它会显示一个覆盖，上面有一个特定于该图像的名字。但是，如果名称比图像宽度长，则立即将图像向右推开，并且叠加不以图像为中心。它只是向右扩展，而不是在双方。

我不知道如何对覆盖进行居中，并避免它在其两侧影响div。

*我尝试使用display: none，但我希望保留CSS3转换。使用display: none完全删除元素将删除CSS3转换。

有什么想法吗？

Answer 1

将.item_overlay样式更改为：

.item_overlay {
        height: auto;
        width: auto;
        margin: 0 auto;
        margin-top: -95px;
        position: absolute;
        z-index: 1;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }

使位置绝对忽略其他元素的位置，然后设置一个负的上边距将其移回顶部。http://jsfiddle.net/q8SER/2/

Answer 2

工作jsFiddle：http://jsfiddle.net/q8SER/3/

我得换一大堆东西才能让它正常运转。

首先，我更改了HTML结构，并将覆盖div放在图标div之前。

下面是新的覆盖CSS：

.item_overlay {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

现在，由于内部div (overlay)溢出了父div，所以我无法按照常规对其进行自动边距，所以我实现了一个jQuery解决方案。

JS代码：

$(".item_overlay").each( function() {
    var offset = ($(this).parent().width() - $(this).width()) / 2;
    $(this).css("left", offset + "px");
});

希望这能有所帮助。