I have tried a few things but seem to be getting nowhere, I can move the text by changing the 'position' tag, but this seems to result in the text kinda vanishing into the boxes edge and being oddly spaced.. I am guessing I have coded this up that its fine on less text, but when adding too much, I get a overlap.. anyway I can shift things about a tad so they look nicely laid out?
Website; http://outside.hobhob.uk Referring to the text which appears when you hover over the portfolio items in the grid. I need the title to stay at the top, but avoid the description underneath overlapping with the header.
Code snippet of the grid section;
<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 I am looking at.. maybe this is where I am going wrong?
.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;
}