2

I am working on my portfolio. I have this page here:

The first picture there is a date on. I would like a text in the bottom, like this:

Result

But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?

<div class="portfolio logo" data-cat="logo">
   <article class="block-thumbnail">
   <a href="#" class="block-thumb">
      <div class="date">
         <span class="day">10</span>
         <span class="month">aug</span>
         <span class="month">2016</span>
      </div>
   </a>
   <div class="portfolio-wrapper">
      <div class="portfolio-hover">
         <div class="image-caption">
            <div class="col-md-4 col-sm-6 col-xs-12">
               <h2>link</h2>
            </div>
         </div>
         <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
      </div>
   </div>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
McDuck4
  • 662
  • 1
  • 10
  • 33
  • With the code you posted here, I see the text "link" on the image. No problem there. What is the issue you are facing. Also, not in the code you posted here, but in the HTML markup on your website, I found this: ` – Shariq Hasan Khan Sep 04 '16 at 12:48

2 Answers2

3

If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.

I will move it outside the .image-caption div 

    <div class="portfolio-wrapper">
        <div class="portfolio-hover">
            <div class="col-md-4 example col-sm-6 col-xs-12">
                 <h2>link</h2>
            </div>
            <div class="image-caption">
            </div>
            <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
        </div>
    </div>

and give it those styles

 .example {
        position: absolute;
        bottom: 0;
        z-index: 1;
        text-align: center;
        left: 0;
 }

Adjust than bottom and left values to match the positioning for your design

ynter
  • 277
  • 1
  • 5
  • 16
  • Hello. Thank you for your answer. Maybe it is a little bit unclear, when the h2 tag only appear when hover. The text should actually be there without hover. That means when you only see the picture, without hover the text should be there. I just tried to play around with your code, but I did not get any good result yet – McDuck4 Sep 04 '16 at 10:57
  • Hi I updated the code to show the changes in the html that I suggeusted and added a custom class, this works for me in your portoflio – ynter Sep 04 '16 at 11:26
  • Hello again. i think maybe we are talking beside eachother? I would like that the text is not on the hover, but the text is just on the picture. – McDuck4 Sep 04 '16 at 12:13
1

You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image

Community
  • 1
  • 1
iScrE4m
  • 882
  • 1
  • 12
  • 31