Создайте парящий фон со ссылкой, которую имеет название

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 \t \t \t \t \t  \t \t \t \t  
 
     </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 \t \t \t \t \t  \t \t \t \t  
 
     </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 \t \t \t \t \t  \t \t \t \t  
 
     </span> 
 
    </a> 
 
    </div> 
 
</section>