テキストが重なりすぎてホバーに重なってしまう

Question

いくつか試してみましたが、どこにもいないようですが、「位置」タグを変更してテキストを移動できますが、これはテキストがボックスに消えてしまうようです奇妙な間隔を置いています。私はこれをコード化して、テキストを少なくしても罰金を科していると推測していますが、あまりにも多くを追加すると、重なり合います...とにかく、

ウェブサイト; 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これは私が間違っているのかもしれない。アイテムは、絶対位置を持っている場合

jsfiddle

：

.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の下部になりたいと私は右の理解場合は、このような何かをしたいと思います他のアイテムと重複しないようにするには、そのアイテムのスペースを作成する必要があります。

88pxはあなたが記述と説明 line-height:28px;

の高さに持ってbottom:60pxとの和である私が説明にmargin:0を追加

.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; 
} 

を動作させるために、あなたはこのCSSを追加する必要が

これはもはや必要ではないからです。そのマージンを維持したい場合... padding-bottom:88px