kiyary

April 19, 2023

Thank you!! :)!!

April 19, 2023

Hello @tuanphan, you seem to be the master of coding!

I also noticed just today (maybe I messed It myself), my footer is divided in two columns in mobile, and I would like it to be one line like on desktop. Could you help me please? I try to use the codes you gave to everyone here, but nothing was happening so I deleted them. I tried to find the same id or block id, but I really have no idea what I am doing xD.

the website is www.kiyary.com

Thank you!

April 16, 2023

On 3/24/2023 at 11:21 AM, tuanphan said:

Add to Design > Custom CSS

/* Masonry hover */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-section .gallery-caption p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(255,255,255,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

HII!! omg yes!!! This is what I needed for so long, thank you so much!! is there a way to change the font? this is already amazing. thank you!!

March 20, 2023

On 2/23/2023 at 2:24 PM, tuanphan said:

You mean

Initial: Hide caption

Hover: Show caption under image?

https://www.kiyary.com/editorial-illustration

Hello Tuan Phan

I mean,

show the caption when Hoover, on the image, not under image, and some images will be a link to projects, so they don't need Lightbox.

Hide the caption under image, just show it when hoover. Is this possible?

Thank you!

February 22, 2023

On 2/15/2023 at 4:46 AM, tuanphan said:

You mean show caption in lightbox, or show caption when hover image on grid?

oh dear, I do mean, show caption when hoover! my bad.

Is there a way to do it? It used to work, you gave me the code, it just stopped working one day 😞

Thank you!

February 13, 2023

On 8/27/2022 at 10:38 AM, tuanphan said:

Can you enable Gallery Caption & add some text? Currently It doesn't show anything

Hello @tuanphan sorry for the late reponse. Yes! it is added here https://www.kiyary.com/editorial-illustration for example. I used to have it working with a code you provided. But one day it just stopped working so I had to replace everything into the fluid engine, but I still left some pages with the text underneath the images in gallery mode, hoping I will be able to make it hover on top of the image again. like projects but in masonry grid.

thank you so much. 🙂

September 8, 2022

On 8/26/2022 at 11:43 AM, tuanphan said:

If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry.

Use this new code

/* Gallery Section Masonry Hover */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
    color: white;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work.

thank you anyways

August 24, 2022

On 8/23/2022 at 4:43 AM, tuanphan said:

Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

1 hour ago, kiyary said:

Hello Tuan! Yes,

here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images.

Thank you!!!!

Hi @tuanphan I am using again the same code you provided long ago,

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

but it has no effect 😞

August 24, 2022

On 8/21/2022 at 10:21 AM, tuanphan said:

I see it still works here, caption appear in lightbox

https://www.kiyary.com/editorial/environment

Hi!

Oh, my bad, I meant not the Lightbox (that works fine), but the captions on Hover with the mouse.

August 24, 2022

On 8/23/2022 at 4:43 AM, tuanphan said:

Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

Hello Tuan! Yes,

here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images.

Thank you!!!!

August 21, 2022

7 hours ago, tuanphan said:

I see it looks fine here https://www.kiyary.com/portraits

Caption appear in lightbox

caption disappear in grid view

What is your problem?

Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone.

I need to caption to appear on hover, like they do for my projects, but in the masonry grid

So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you

This is the code I have, which of course I do not understand , this is foreign language for me haha.

tuanphan · August 21, 2022

Omgosh THANK YOU! @tuanphanYES! this is what i needed! You are a saviour!

August 20, 2022

Hello guys!

I used to have the wonderful code provided by @tuanphan to display the caption on my galleries as a hoover, but since the last update, it is not working anymore and I do not know what to do 😞 . I have switched my homepage to the new "fluid engine" as a temporal solution, but I would still appreciate to have the hoover on all my masonry galleries on my web.
This is the code I used to use:

-- on a side note, another of my codes broke, the "selected page" used to highlight on a color and now went back to underline. could this be fixed?

Thank you anyone who would help me!!
My website is www.kiyary.com and page with a masonry gallery for example is this one: https://www.kiyary.com/editorial-illustration
My previous homepage https://www.kiyary.com/home-masonry when the captions used to be on top of the images on a hoover.

thank you all!!

August 18, 2022

Site URL: http://kiyary.com

Hello guys!

I need some help on figuring out how to activate or create a badge/label of "SOLD OUT" on products marked as such, as the only thing I get, it is a tiny text under the price.

my site is www.kiyary.com

First screen shot shows what I want. Right now I managed to have this badge design by using "product" block on a new page www.kiyary.com/shop ; but where I want it is in my real store page www.kiyary.com/store ; because when I use the product block it only can put up to 30 items and when you click on the product the breadcrumbs take you back to the original store.

Thank you! 🙂

P.S. I have other questions regarding some hover text on gallery.

August 18, 2022

Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me?

This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it.

thank you so much

EDIT to add my site is kiyary.com

thanks!

October 15, 2021

16 hours ago, tuanphan said:

I see it is fine to me. Did you figure it out?

yes, you helped me 🙂 thank you!!

October 13, 2021

On 4/19/2021 at 12:18 PM, tuanphan said:

Edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}

I tried both codes, Added @naomiokitacode ( bellow ) plus did the change @tuanphan mentioned to make it clickable, but the hover effects appears a second the moment I paste the code, then it disappears 😞 so when I save and refresh the website, the hover is not working anymore, don't know why. Could someone help me please? Thank you website www.kiyary.com

On 4/17/2021 at 8:49 PM, naomiokita said:

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

October 13, 2021

On 11/2/2019 at 3:15 PM, brandon said:

Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post.

If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question?

If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

Hello Brandon, I tried the code you posted above, but I get double titles on the light box, and I would like to remove them from the main page. Currently I am leaving the titles on on the main page, because I want those to be Hoover text, but I have no idea how to do that. While I managed to put the text on transparent (no background), I have no idea why they are double.
Could you help me out please? Thank you so much!

website: www.Kiyary.com

October 2, 2021

Oh, extra question, I would love to have that icon for now, as I see it simpler to do, or (I don't know if it's possible) but I would love to have a "portfolio block" ( I don't know if it's called as such) bellow. What I mean is if there's a way to open (expand) the project selected above the portfolio. I will try to find an example of what I mean.
Thank so much!!! 🙂 🙂 🙂 🙂

October 2, 2021

14 hours ago, bangank36 said:

Do you mean adding an icon at center position (like in my below image) that directs your site back to https://www.kiyary.com/portfolio when clicked?

YES! that's exactly what I meant! I will try to attach an image now, I want to make something like this: It could direct me to "home" or to the "portfolio" page. I would love it if I could choose.

I am also trying , to use the image gallery on the home page as the portfolio , since portfolio doesn't have masonry style; I wanted to try to use this code fromhttps://www.ghostplugins.com/steps/wj7238uh to add hover text to make it behave as the portfolio page, but it is not working, any ideas why?

// Grid Gallery Zoom //

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 1  
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    z-index:99999999999;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: #ffffff!important;
    padding: 10px;
  }
}

Thank you so much for helping!! 😄 you people are so awesome!

September 29, 2021

Site URL: http://kiyary.com/portfolio

Hello guys!

I've been googling this for days, and I cannot find the answer, so I decided to post the question.

I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the:

<"name of the previous project" >icon here< "name of the next project">

I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing.

Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge.

Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 )

Thank you so much!

(I cannot upload an image, I get an error (Error code: -200) 😞 )

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by kiyary

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources