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/