html - 使悬停背景具有其标题的链接并更改悬停标题

Question

所以我面临着一个非常大的问题。我有一张图片，当鼠标悬停时，会出现一个带有标题的白框。现在标题有指向页面的链接，但没有框。我尝试了很多事情(例如:将“display:inline-block;”应用到 css (...))但仍然没有应用链接。重点是每个框都具有相同的链接，并具有它包含的标题。此外，我似乎无法更改标题(“打开”)，并且图像之间垂直有很多空白。有人知道如何解决这个问题吗？

页面链接:

http://portugalweddingphotographer.com/portfolio/

Answer 1

代替 a 标签只包裹文本，包裹上面的 div 标签，如:

<div class="section_hover">
    <a class="title_below_hover" href="http://portugalweddingphotographer.com/gallery/938/">
        <div style="display:inline-block;" class="grid_hover_div_padding">
            <div class="for_title_below the-title-hover">OPEN</div>
        </div>
    </a>
</div>