Jquery colour overlay on images

Question

Im trying to create a hover state on my images that darken the images using bootstap

Although instead of covering the whole image including the white border I want it to remain within the white padding.

I cant seem to the position right. As soon as I add heights and percentages the over states don't remain in place when responding to screen width. They become pushed out over the image.

Can anyone assist?

here is the code

http://bootply.com/90238

Answer 1

FIDDLE

You need to change your .caption class- it's currently using a percentage value to calculate padding, which makes ascertaining the element size based on this difficult. Change it to a pixel value then offset the element top, right, bottom, left by the same amount (-1px to compensate for your border). This will mean all your thumbnails have a consistent white border, and removes any percentage based sizing artefacts.

.caption {
    position:absolute;
    top:4px;
    left:4px;
    right:4px;
    bottom:4px;
    background:rgba(66, 139, 202, 0.75);
    padding:5px;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

Answer 2

The way I found you can do it is like this. Change .caption width and height and then center the whole thing.

CSS:

.caption {
    position:absolute;
    top:2%;
    background:rgba(66, 139, 202, 0.75);
    width:97%;
    height:96%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

Note: After a quick look its not perfect as its using % fixed width and height and then this would work fine.