project thumbnails caption in carousel

[robsdonatini]

Hello there!
Still me fighting with code and insulting chatgpt.
I was wondering if I could use a Carousel slide with mouse scroll or with horizontal scroll showing project thumbnails as here.

wip.landcho.eu/all-projects-copy

And activate the visualization of the project titles and the project tags, as here while using thumbnails normally
https://wip.landcho.eu/#projects

Or if the only way is to write them in "Edit Caption" cause 1. it's a long way to do it 2.the formatting is weird and I can really fix the line height using 2 text formats

website user casetta
password cibocinese

Thanks in advance for your help

Roberta

[arminunruh]

this config would put the captions of images directly underneath an image in the carousel:

and in this case the captions are the project titles.

[arminunruh]

however, this does not show the texts that the "project thumbnail" elements show additionally:

i think "project thumbnail" elements also show tags and categories additionally to the project title.

also you want to have this

mouseover effect right?

do u need both of those things additionally?

[robsdonatini]

yes i'd love to have the tags and the title beneath the carousel grid as they appear in thumbnail, for the effect black and white i think i'll sort it out

[arminunruh]

Okay, I understand. I will have to think about how to code it because right now, any project thumbnails inside a carousel are actually just images that link to the project with the project title and they don't contain the tags.

[robsdonatini]

no problem, i'll find another solution graphicallly. could be useful in future, thanks for the help!

[arminunruh]

give me some time i might find some time in the next couple of weeks to code this

[arminunruh]

ok! if you update your carousel addon you have this new setting:

please enable it

now u will have your tags under your title:

but of course u want your tags above the title.
so u can use this css

.lay-carousel-caption-under-slide-caption{
    display: flex!important;
    flex-direction: column!important;
}
.lay-carousel-caption-under-slide-caption{
    order: 2!important;
}

[arminunruh]

and to have different image color or sth like that for a mouseover you could use filter css https://developer.mozilla.org/en-US/docs/Web/CSS/filter

[robsdonatini]

Thank you that's great!