Easy way to put captions in images

hx

Hello everyone,

I wonder if there's an easy way to put caption inside the actual image, make it appear as an overlay?

I've arrived at this:

.caption{
    transform: translateY(-100%);
    padding: 20px;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: all 1s ease;
}

.caption:hover {
	opacity: 1;
	transition: all 1s ease;
}

But it creates an unwanted (white) void at the bottom of the image (where the cation used to be) and also, the caption overlay does not fill the whole image.
See here. (the website I am working on)

Any clue how I could further work on this?
Thanks!

Richard

Dear @hx

Wish to help, however the Link provided does not take me to the website to inspect it sorry :)

Best
Richard

hx

Hello Richard,

sorry, weird mistake. It just copied the anchor. This is the website:
https://stilpunkt.mcelangelo.com/

I managed to get the caption into the image and style it via this code:

.img {
	display:flex;
	z-index:0;
}

.caption {
	padding: 40px;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: all 1s ease;
	z-index: 10;
	overflow: hidden;
	flex-grow:1;
}

.caption:hover {
	opacity: 1;
	transition: all 1s ease;
}

However, as soon as the text of the caption reaches the bounds of the image, it overflows, disregarding the overflow:hidden command. Did I forget something? I tried a several other commands (as described here: https://medium.com/@gaurav5430/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6), but to no avail.

Maybe you have an idea. Thank you very much!

hx

@Richard-Keith Hey Richard, I wonder if you have seen this... but can you point me into the right direction regarding the alignment of the Caption text within the container?

I'm trying to make it vertically centered as opposed to the top, which is now the case, but I still want the container to fit height and width to the parent (except the 20 px margin).

Thank you!