Image caption in rows

Hello.

i have a really wonderful working code from here, and was wondering if it is possible to break the lines when hovering over?

"At the moment, the row is, like this 2021"

"Would be great
to have it like this
2021"

I found this code in a thread here but i cannot find it. I think it is from @tuanphan
But maybe other know also?

Any help appreciated! 🙏

https://www.lonniwong.com/sculptures

/* Image Captions on Hover*/
.layout-caption-overlay-hover .image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 108, 0, .8) !important; /* Background Overlay*/
}

//captions//

.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);

  /* overlay color */
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
    pointer-events: none;
}

.gallery-caption-wrapper {
  display: flex;
  align-items: center;
  /* center vertically */
  justify-content: center;
  /* center horizontally */
}

.gallery-caption-content {
  font-size: 1.3rem !important;
  /* caption font size */
  color: #F7EDE4;
  /*caption font color */
  text-align: center;
  /*padding: 16px;*/
  max-width: 85%;
}

.gallery-grid-item {
  position: relative;
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-caption-grid-simple {
  transition-delay: 0ms;
}

.gallery-grid-lightbox-link:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

4 hours ago, LonniWong said:

Hello.

i have a really wonderful working code from here, and was wondering if it is possible to break the lines when hovering over?

"At the moment, the row is, like this 2021"

"Would be great
to have it like this
2021"

I found this code in a thread here but i cannot find it. I think it is from @tuanphan
But maybe other know also?

Any help appreciated! 🙏

https://www.lonniwong.com/sculptures

/* Image Captions on Hover*/
.layout-caption-overlay-hover .image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 108, 0, .8) !important; /* Background Overlay*/
}

//captions//

.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);

  /* overlay color */
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
    pointer-events: none;
}

.gallery-caption-wrapper {
  display: flex;
  align-items: center;
  /* center vertically */
  justify-content: center;
  /* center horizontally */
}

.gallery-caption-content {
  font-size: 1.3rem !important;
  /* caption font size */
  color: #F7EDE4;
  /*caption font color */
  text-align: center;
  /*padding: 16px;*/
  max-width: 85%;
}

.gallery-grid-item {
  position: relative;
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-caption-grid-simple {
  transition-delay: 0ms;
}

.gallery-grid-lightbox-link:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

 

We can try decreasing the max-width of the text so it will wrap into many lines

section[data-section-id="637a470e3a7dab6b8a18580f"] .gallery-caption-content {
  max-width: 33%;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

hello @Beyondspace

thank you for your reply. now to me nothing happens. 

i put this code after everything right?

section[data-section-id="637a470e3a7dab6b8a18580f"] .gallery-caption-content {
  max-width: 33%;
}

2 minutes ago, LonniWong said:

hello @Beyondspace

thank you for your reply. now to me nothing happens. the captions disappear. 

i put this code after everything right?

section[data-section-id="637a470e3a7dab6b8a18580f"] .gallery-caption-content {
  max-width: 33%;
}

I can not see my code on your site. Can you take screenshot where you put it?

4 minutes ago, Beyondspace said:

I can not see my code on your site. Can you take screenshot where you put it?

it is from line 114

Opps, wrong section id

please try this for instead

section[data-section-id="637a42a9f70bf35e38d945a8"] .gallery-caption-content {
  max-width: 33%;
}

6 minutes ago, Beyondspace said:

Opps, wrong section id

please try this for instead

section[data-section-id="637a42a9f70bf35e38d945a8"] .gallery-caption-content {
  max-width: 33%;
}

 

ah ok. thank you. i see it now. i like the idea, however content wise it is unfortunate now.
i can try 50% maybe and see if i find a good average....

if there is another solution breaking 3 rows, would be ideal.