Centered Text Over Image on Hover / New to Forums

HTML & CSS
1

I’m kinda new to coding, and working on a new Cargo portfolio site. I am proud of myself that I was able to turn all my thumbnail images to black and white, have them turn color on hover, AND display caption text over the photo on hover as well. (*I’ve only applied this to a few thumbnail images thus far.)

What I’m having trouble with is getting that text perfectly centered on each image.

https://homestead-studio.cargo.site/

Can anyone take a look and let me know if you’ve got any suggestions? Thanks - I’m looking forward to learning more!

  • Eric
2

Hi,

Flexbox is an efficiengt way to achieve this:

media-item .caption {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin: 0;
    height: 100%;
}
1 Like
3

YES - thank you! I had heard about flexbox…but was having trouble implementing it. Much apprecaited!

4

you’re welcome