York: Is it possible to move caption on top of the image?

Hi!

I have put together a few lines that should do the trick. Try adding them to your custom CSS:

/* puts captions above images */
.project-slide {
   display: flex;
   flex-direction: column-reverse;
}

/* optional: image captions spacing */ 
.project-slide-description-title {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
}

.project-slide-description-text p {
   margin-top: 0px !important;
   margin-bottom: 10px !important;
}

.project-slide-description-wrapper {
   margin-bottom: 10px;
}

This worked!!! Thank you so much!!!

1 hour ago, cesarlanga said:

Hi @Madsgram

For some reason it's not working for me. I also use York template and here's my gallery page: https://decagon-pear-tmt5.squarespace.com/iberostar-selection-bavaro  —  I want both the title and description of each image to display on top of each image. To be more specific: In a small Arial font (black) with a white background, on the bottom left corner of each image.

Thanks!
cc @tuanphan

First, can you enable title & description? i don't see both

16 hours ago, cesarlanga said:

Hi @tuanphan — Title & Description are enabled. I don't know why they don't show up.

.collection-type-gallery.gallery-design-grid .slide .slide-meta {
    display: block !important;
    position: absolute;
    z-index: 999;
    color: #fff;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    padding-left: 20px;
}

@cesarlanga

.collection-type-gallery.gallery-design-grid .slide .slide-meta {
    display: block !important;
    position: absolute;
    z-index: 999;
    color: black;
    left: 0;
    right: 0;
    background: white;
    padding-left: 20px;
    bottom:0;
    font-size: 12px;
}
.collection-type-gallery.gallery-design-grid .slide .slide-meta p {
    margin-top: 0;
    margin-bottom: 0;
}

share page url pls

Hi mdhanjai the pages were hidden so I didn't share the url. Madsgrams solve works though!

Thank you for reaching out as well :)

Hi @Madsgram

For some reason it's not working for me. I also use York template and here's my gallery page: https://decagon-pear-tmt5.squarespace.com/iberostar-selection-bavaro  —  I want both the title and description of each image to display on top of each image. To be more specific: In a small Arial font (black) with a white background, on the bottom left corner of each image.

Thanks!
cc @tuanphan

Hi @tuanphan — Title & Description are enabled. I don't know why they don't show up.

Thanks @tuanphan — 2 more things:
1. How can I change the caption position to display on top of the image?
2. I only want the black background to be behind the caption, not the entire width of the image.

See example attached.

Thank you!