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!

[Richard]

Dear @hx

I apologise that i cant figure it out directly at the moment even though i would like to help :)

I have found some content online that will definitely get you to your wanted destination! I hope this helps and i haven't let you down!

https://www.w3schools.com/css/css_align.asp

https://vanseodesign.com/css/vertical-centering/

https://css-tricks.com/centering-css-complete-guide/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html

https://blog.logrocket.com/13-ways-to-vertical-center/

Once again good luck! Let me know how you go :)

Sincerely
Richard

[hx]

Thank you @Richard-Keith, I'll give these a read - even though I already delved into some of them!

xx