• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • Last Modified:

Bootstrap image static caption

Hello Experts,

Here is a the full code below.

http://codepen.io/exceptional/pen/qAmIE

This is a simple two column (Bootstrap) responsive layout.
I use the "push" and "pull" classes on each column in order to decrease the gap between the two columns.

What I am trying to achieve is:

Absolute position the caption (span) to the bottom of the image while the image is responsive and also the caption with it. I think it is fairly simple but for some reason I am not able to get it right.

Any help would be appreciated!
0
Refael
Asked:
Refael
1 Solution
 
GaryCommented:
http://codepen.io/anon/pen/fxmlb

Wrap your second image in a cover-img-wrap class div
Apply the max-width to the images div container and not the image

To the img add
    width:100%;

To the anchor tag add
    display:block;

To .textCenter add
    position:absolute;
    bottom:0;

Remove .textCenter from the .row div
0
 
RefaelAuthor Commented:
Always, Thank you Gary :-) A little bit here and there and i got it just perfect!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now