0

I have an inline image that I'd like to apply a caption to. I want this caption to have a slight overlay color, and fill up 100% of the width/height of the image.

Because my images are being displayed in a responsive grid, the size of the image is fluid. Therefore, I can't apply simple CSS like "height: 261px; line-height:261px".

I'm having trouble getting this hovering to fill up 100% of the image height, and I'm also having trouble centering the vertically over the image, since the image size is fluid.

Here's my CSS so far:

.ctp-hover img{
    width:100%;
    height:auto;
}

a.ctp-hover {
    display: inline-block;
    position: relative;
}

.hover-caption {
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: red;
    background:rgba(199,74,78,0.75);
    color: white;
    display: none;

}

I've attached a JSFiddle example here: http://jsfiddle.net/5X7ub/16/

Eric Wood
  • 579
  • 2
  • 9
  • 22

2 Answers2

1

I went for a pure css solution, no js required. The css transitions I used are not fully cross browser, but they should degrade gracefully, and hey, if you want to use an inferior browser (read IE) you should expect an inferior browsing experience.

My code looks like this (I simplified the HTML a little to make things a bit more readable):

<a class="hover-me">
    <span class="caption">VIEW</span>
    <img src="http://lorempixel.com/261/261/"/>
</a>

.hover-me {
    position: relative;
    width: 250px;
    display: inline-block;
}

.hover-me img{
    width:100%;
    height:auto;
    display: block;
}

.hover-me:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background: rgba(255,0,0,.5);
    transition: all .5s ease;
    opacity: 0;
}
.hover-me .caption {
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    margin-top: -10px;
    text-align: center;
    transition: all .5s ease;
    opacity: 0;
    z-index: 2;
    color: #fff;
    line-height: 20px;    
}
.hover-me:hover:after , .hover-me:hover .caption {
    opacity: 1;
}

As you may notice:
- the caption and overlay are hidden with the help of opacity, to make it trasitionable with css.
- the stretching is done by adding a bottom: 0; or height: 100%;
- the text is centered vertically by setting the top to 50% and setting the margin-top to half the height of the text
- The overlay is achieved with a :after on the link, cause the caption has not got full height now. that is also the reason why the z-indexes are there, else the overlay would appear on top of the caption.

Don't forget to run your code trough something like prefixr (or use some less/sass mixins if you have them) to get the maximum cross browser support (for opacity an transition mainly)

I hope the code is clear. If not, feel free to ask. I also updated your fiddle to demonstrate: http://jsfiddle.net/5X7ub/25/

Pevara
  • 14,242
  • 1
  • 34
  • 47
  • I think the margin-top solution is not generic since the caption text can be longer than a single line. – Chandranshu Nov 06 '13 at 21:23
  • 1
    @Chandranshu true, but I do believe my solution is at least accurate with a single line of text, while yours is never 100% accurate, and both our solutions suffer the exact same problem when the caption spans multiple lines... Would love the see your `calc()`solution btw – Pevara Nov 06 '13 at 21:43
0

I have updated your fiddle to solve your problem. You just had to add

bottom: 0
padding-top: 48%

for the caption to cover the whole height and the text to be aligned approximately in the center. I'm afraid that you can only position text ever so close to the middle without support for CSS3's calc().

Also see:

Community
  • 1
  • 1
Chandranshu
  • 3,669
  • 3
  • 20
  • 37