Title over image – hover background color spacing

Hi,

I’m building an archive page using tagDiv Composer and having issues with spacing and my hover background color.

I am using 3 columns in a single row, each with a Title over image element and the archived issue cover as the image (Image Repeat: No Repeat, Image size: Contain, Image alignment: Center). My title text is white and appears over a dark hover background color.

The problem is that the hover background color will extend past my image and create a dark, banded border look. Depending on the screen/device size this happens on either the sides or the top.

Examples:
http://www.screencast.com/t/fEEriP3MFy
http://www.screencast.com/t/wM9FToNZ59pq

Is there something I can adjust to limit it to only the size of the image? Or make the element strictly the size of the image?

Hi Catalin,

Please see the specific page here: http://www.forge32.com/digital-editions/. The rest of the site is currently private for testing purposes.

While I’m asking… there are a few covers in the archive that need to be split into 2 or 3 versions. Sample March/April vs January/February from our current website (not WordPress): http://www.screencast.com/t/ViL4tFlp

I can get around this by just making more full size covers if necessary, but if you have any suggestions for splitting a single column/issue that would also be helpful.

Thanks for your help!

Unfortunately that fixes the hover but winds up cropping the magazine cover at the same time. Is there a way to force the image to remain in proportion while achieving the same effect with the hover overlay?

http://www.screencast.com/t/0DT0K18C5HM5
http://www.screencast.com/t/9soE2TWCi

This seemed to work for me

.tds-title-over-image::before {
background-size: cover;
}

Where did you add

.tds-title-over-image::before {
background-size: cover;
}

??

Thanks Calin.

This is very close to what it needs to be but still not quite there.

Is there something I can do to have the entire image display consistently? The proportions cannot change or I get edges cut off like in this ‘cover’ sample using the CSS suggested: http://www.screencast.com/t/F9e26IuF4F8. At some breakpoints it does appear correctly, but most are getting cropped off in one way or another.

All of the original images files are 605px wide by 800px tall. The actual scale doesn’t matter to me as much as having the entire image showing. Can I designate the image size somewhere and have the column dictate the % width to scale proportionally?