javascript - 垂直对齐图像 hover img

Question

我有一个宽度相同但高度不同的图像网格。

悬停图像时，我想显示两个不同的链接以获取图像和作者的信息。

问题是我不能垂直排列图像上的链接:/

HTML:

                <div class="item">
                    <div class="img-work">
                        <img src="img/grid1.jpg" alt="" class="img-grid">
                        <a href="#" class="zoom"">
                            <img src="img/hover-item.png" alt="">
                        </a>
                        <a href="#" class="info">
                            <img src="img/hover-info.png" alt="">
                        </a>
                    </div>
                </div>

CSS:

div.img-work a.zoom {
   left: 31%;
   position: absolute;
   top: 27%;
   visibility: hidden;
   width: 38px;
}
div.img-work a.info {
   left: 50%;
   position: absolute;
   top: 27%;
   visibility: hidden;
   width: 39px;
}

jQuery:

    $('div.img-work').hover(function() {
        $(this).children('a').css('visibility', 'visible');
        $(this).children('img').css('opacity', '0.5');
    }, function() {
        $(this).children('a').css('visibility', 'hidden');
        $(this).children('img').css('opacity', '1');
    });

如您所见，我不知道如何垂直对齐这些链接。任何提示将不胜感激。提前谢谢你

Answer 1

这是一个 CSS 解决方案:http://jsfiddle.net/08vorn1s/ .

图像在其容器内垂直和水平居中。如果图像需要底部对齐，您可以轻松调整代码。

HTML:

<div class = "grid">
    <div class = "row">
        <div class = "cell">
            <img src = "http://placehold.it/150x150 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
        <div class = "cell">
            <img src = "http://placehold.it/150x170 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
        <div class = "cell">
            <img src = "http://placehold.it/150x200 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
    </div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.grid {
    display: table;
    width: 100%;
}

.grid .row {
    display: table-row;
}

.grid .row .cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.cell > .links {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: none;
}

.cell:hover > img {
    opacity: 0.5;
}

.cell:hover > .links {
    display: block;
}