carousel captions custom css: expanding the textbox from bottom to top

[PhilippHannappel]

Hej there,

in a couple of projects I have some longer texts in the caption-section of my carousel. i would like to display only the first two and a half or three lines of the textbox and smoothly expand to the full height while mouseover (hover) from bottom to top. i already got a "solution": it kind of demonstrates the way i want it to work - but with defined heights. so i am afraid, that it is not working on different monitor sizes. further i am not having a smooth transition since i am working with the "auto"-prompt. is there someone whos got a better solution?

example: https://neu.philipphannappel.de/im-tanz/

.project-slide .swiper-slide {
	height: 79vh !important;
}
.project-slide .lay-carousel-caption-under-slide-caption {
	position: absolute;
	bottom: 0;
	background-color: white;
	height: 5vh;
	padding: 15px !important;
	transition: .5s;
}
.project-slide .lay-carousel-caption-under-slide-caption:hover {
	height: auto;
}

explanation to the code: the carousel has a fixed height of 70vh. further i defined an extra class .project-slide because i want this type of carousel only for my projects.

[felix_rabe]

@PhilippHannappel that is an interesting case. I think it is not very good in terms of user experience right now, I just investigated the text because you told me here it will expand. maybe you can make the captions to show as an overlay when you click on an info-button or something like that. or just get rid of the caption on mobile devices and keep the thing you have now for desktops.

[PhilippHannappel]

@felix_rabe thanks for your feedback. I know that the current state is not working well. Like I said, I am looking for a better solution. Further this style is planned for desktop view only. Mobile will be different. Like I said the goal I would like to achieve is that 2-3 lines of the captions are visible below the picture. When hovering the captions shall expand to full size from bottom to top.

I was thinking if working with a flex-container will work, but I did not achieve a proper solution yet...

[arminunruh]

hello!
this is what ure looking for:
https://www.youtube.com/watch?v=JN-nme9oF10
https://codepen.io/kevinpowell/pen/XWvpjLr

[PhilippHannappel]

Hej @arminunruh ,

thanks a lot for the links. This solved the problem of the animation. Nice. Downside is: it's not working in every browser, the property seems to be quiet new. But I'm fine with it for now. Still need some time with the website so maybe there will be some updates to different browsers (:

Coming to the other problem I've mentioned: I've expanded the swiper-slide height by 9vh to be able to position the caption below the pictures. This kind of overwrites the spacing properties the captions have and for sure will look different on various monitors and browsers. Have you people got a better solution to expand the total height just by the content height?

[arminunruh]

Hey, it seems you went for a different solution now. When I look at your website, it seems that the captions just translate up with the animations.

About the other problem you mentioned.
I am not sure if I understand correctly. For me, it would be better if I had a page where I can see the problem in action.