Jump to content

Image caption in rows

Recommended Posts

Posted (edited)

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
  • Replies 7
  • Views 382
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted (edited)

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

Edited by LonniWong
Posted
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted (edited)
4 minutes ago, Beyondspace said:

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

2101003059_Bildschirmfoto2022-12-15um16_00_40.thumb.png.0a8e21f463a6963badd27d0f4fd17236.png

it is from line 114

Edited by LonniWong
Posted

Opps, wrong section id

please try this for instead

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
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. 

 

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.