Jump to content

Image caption in rows

Recommended Posts

261375243_Bildschirmfoto2022-12-15um14_23_26.thumb.png.cc3e4a2be52cc467aa0e4998c07f9918.png


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;
}


 

Edited by LonniWong
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

4 hours ago, LonniWong said:

261375243_Bildschirmfoto2022-12-15um14_23_26.thumb.png.cc3e4a2be52cc467aa0e4998c07f9918.png


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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.df86834d6b17cfab14e12831cfb16027.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Opps, wrong section id

please try this for instead

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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. 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.