Текст, перекрывающий слишком много текста при зависании

Question

Я пробовал несколько вещей, но, кажется, ничего не получаю, я могу перемещать текст, изменяя тег 'position', но это, по-видимому, приводит к тому, что текст исчезает в коробках край и странно разнесены. Я предполагаю, что я закодировал это, что его штраф на меньший текст, но при добавлении слишком много, я получаю перекрытие .. во всяком случае, я могу переложить вещи на немного, чтобы они выглядели красиво выложенными?

Сайт; http://outside.hobhob.uk Ссылаясь на текст, который появляется при наведении на элементы портфеля в сетке. Мне нужно название, чтобы оставаться наверху, но избегайте описания под перекрытием с заголовком.

Фрагмент кода секции сетки;

  <div class="portfolio-item item tile entry"> 
       <a href="single.html"> 
        <img src="content/portfolio_07.png" alt=""> 
        <div class="magnifier"> 
         <div class="buttons"> 
         <h4>Melbourne Design Guide</h4> 
         <p>Creative mapping and Illustration for the cities annual design guide</p> 
         </div><!-- end buttons --> 
        </div><!-- end magnifier --> 
       </a> 
      </div><!-- end item --> 

CSS Я смотрю .. возможно, именно здесь я ошибаюсь?

.buttons.blog-style p, 
.magnifier p, 
#gallery .caption p { 
    background-color: transparent; 
    border-color: rgb(0, 0, 0); 
    border-style: none; 
    border-width: 0; 
    font-weight: 500; 
    bottom: 20px; 
    color: rgb(0, 0, 0); 
    font-family: "Raleway"; 
    font-size: 16px !important; 
    left: 30px; 
    line-height: 28px; 
    position: relative; 
    text-decoration: none; 
    text-transform: none !important; 
    text-shadow: none; 
} 
.buttons.blog-style h4, 
.magnifier h4, 
#gallery .caption h3 { 
font-size:28px !important; 
line-height:28px; 
font-family:"HighVoltage" !important; 
display: inline-block; 
color: rgb(0, 0, 0); 
position:absolute; 
left:30px; 
bottom:60px; 
text-decoration:none; 
text-transform: none !important; 
background-color:transparent; 
text-shadow:none; 
border-width:0px; 
border-color:rgb(0, 0, 0); 
border-style:none; 

} 

Answer 1

я предполагаю, что вы хотите h4, чтобы всегда быть на дне .button и если я понял правильно, вы хотите что-то вроде этого:

jsfiddle

если элемент имеет абсолютную позицию и вы не хотите, чтобы он перекрывал другие элементы, вам нужно создать пространство для этого элемента.

вам нужно добавить этот CSS для того, чтобы работать

.buttons { 
    position:relative 
} 
.buttons.blog-style p, 
.magnifier p, 
#gallery .caption p { 
    padding-bottom:88px; 
} 
.buttons.blog-style h4, 
.magnifier h4, 
#gallery .caption h3 { 
    margin:0; 
} 

где 88px является суммой между bottom:60px у вас есть по описанию и высоте описания line-height:28px;

я добавил margin:0 по описанию потому что это просто не нужно больше. но если вы хотите сохранить эту маржу ... добавьте ее в padding-bottom:88px