display the title of every image after opening an image

Hi @uroveits,

You can try to use a custom CSS rule like the one from below to force the captions display at the bottom of Simple Lightbox image:

.sl-wrapper .sl-image .sl-caption { 
     position: relative; 
}

Hi imagely,
many thanks for your response. But unfortunately solves
.sl-wrapper .sl-image .sl-caption {
position: relative;
}
not the problem.
It must be a “higher-level” CSS programming that is causing the problem.

As a reminder:
If I call the inspector in the browser (firefox) and uncheck “bottom”, the image title appears under the image.
The key to the solution is to find the place where “bottom” can be switched off – namely for .sl-wrapper, .sl-image or .sl-caption

Reg
Jochen

@uroveits,

The caption layer has position: absolute and bottom=0 insets it at the bottom of the image container. Changing it to position relative or unsetting bottom=0 should do the trick:

.sl-wrapper .sl-image .sl-caption {
	bottom: unset !important;
}

Hi mihai-imagely,

Thank you for your suggested solution ("bottom: unset !important;").

Unfortunately, this doesn't solve the problem either.
The inspector says two things:
1) element
"<div class="sl-caption pos-bottom" data-initial-display="" style="display: block; width: 747.2px;">Jahrgang 1983: Klassenliste 8e</div>"

Note: if I hide the element in the inspector, this is hidden. IMHO this means that this element must somehow be controllable with a css command.

2) Link address: https://www.gym-anna-ehemalige.de/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/simplelightbox/simple-lightbox.css?ver= 3.37
.sl-wrapper .sl-image .sl-caption {
display: none;
padding: 10px;
color: #fff;
background: rgba(0, 0, 0, 0.8);
font-size: 1rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I can't manage to change "bottom:0".
As a reminder: if "bottom:0" is unchecked in the inspector - i.e. "bottom:0" is crossed out, the title of every image after opening an image is displayed below the image.

Any other suggestions?

Reg

Jochen

Hi @uroveits,

I’m sorry, perhaps we are missing the needed end result here so could you please reformulate it for us?

The suggested CSS workaround to change caption layer’s position from absolute to relative should definitely help the caption layer act as a separate item placed below the image instead of it acting as an bottom image overlay. If the suggested custom CSS doesn’t work, please review the previously added CSS rules to ensure that you don’t have any syntax issues or just move it at the top.

.sl-wrapper .sl-image .sl-caption { 
     position: relative; 
}

Also, we have now tested the second custom CSS rule and it definitely worked for us:

.sl-wrapper .sl-image .sl-caption {
	bottom: unset !important;
}

Hi imagely,

Your notes “please review the previously added CSS rules to ensure that you don’t have any syntax issues or just move it at the top” and “also, we have now tested the second custom CSS rule and it definitely worked for us” led me to solve the problem.

The key was to use the right customizer:
I used the customizer from my theme (“Neve”) – like I do on other websites.
After this didn’t work at all, I downloaded the plugin “Simple Custom CSS”. When I there
.sl-wrapper .sl-image .sl-caption {
position: relative;
}
enter, it works as intended, i.e. the title of the image is now below the image.
All in all a difficult birth. Thank you for your patience and help.
Reg
Jochen