使悬停的背景具有其标题的链接[关闭]

Question

所以我面临一个非常大的问题。我有一个图像，当悬停时，会出现一个带有标题的白色框。现在标题有一个页面链接，但没有框。我尝试了很多东西（例如：将“display：inline-block;”应用于css（...））但仍然没有应用链接。关键是每个框都具有相同的链接并具有它所包含的标题。

该页面的链接是：

http://portugalweddingphotographer.com/portfolio/

Answer 1

试试这个：

.cosmo-thumb-view.title-over article section .padding_visible > a{
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

Answer 2

由内而外地做。将大小设置为链接，其余部分将相应调整大小。只需很少的 CSS 就可以做到这一点。

/* Everything is an inline block to make it easy, although not strictly necessary */
.entry-content,
.padding_visible,
.padding_visible a {
  display: inline-block;
}

/* I've made this a background now. You can do this using inline styles of course, for your image gallery. */
.entry-content {
  background-image: url('http://portugalweddingphotographer.com/wp-content/uploads/2015/07/rsz_untitled-6707.jpg');
  background-size: cover;
}

/* Let the a define the padding, that way, it covers the whole of its parents,
   and you can even click outside the white area. */
.padding_visible a {
  padding: 15px;
  vertical-align: bottom; /* Eliminate some extra space at the bottom */
}

/* Let the  span size it. It will strech the a and its parents. */
.entry-content .padding_visible a span {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
  background-color: rgba(255, 255, 255, 0);
  opacity: 0;
}

/* Trick: change the span when the a is hovered. */
.entry-content .padding_visible a:hover span {
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL					    				    
      </span>
    </a>
  </div>
</section>
<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL					    				    
      </span>
    </a>
  </div>
</section>
<section class="entry-content ">
  <div class="padding_visible">
    <a href="http://portugalweddingphotographer.com/gallery/le-quinta-vintage-my-vintage-wedding-portugal/" rel="bookmark">
      <span class="entry-title the-title-hover">
        THE QUINTA MY VINTAGE WEDDING PORTUGAL					    				    
      </span>
    </a>
  </div>
</section>