Hover over Gallery images (7.1)

Site URL: https://guitar-coyote-2582.squarespace.com/config/design

Can anybody help how to do this please? 

Please describe what you want to happen when a gallery image is hovered over.

On the landing page i just want overlay to feel you can click on it. On the about page where team photos are i want to have short bios on purple background on hover. thnx.

22 hours ago, creedon said:

Please describe what you want to happen when a gallery image is hovered over.

Hi @Creedon Can you help please?

Which page? /config is url for site owner

23 hours ago, tuanphan said:

Which page? /config is url for site owner

About page / staff images: https://guitar-coyote-2582.squarespace.com/config/

i dont have the site live yet, can this work?

On 10/17/2020 at 8:43 AM, tuanphan said:

Which page? /config is url for site owner

site pass: 12345

To find page url, see this.

2 hours ago, tuanphan said:

To find page url, see this.

 /about page and /home

Add to Page Settings > Advanced > Header

<style>
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.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;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper:after {
    background: blue;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

Thank you Master. is there a way to make the font white only for the hover text?

@tuanphan  On mobile looks off see attch. Is there a way to fix that?

Can we make a name and title on that bio hoover please.

the text too long, you can shorten it

@tuanphan on desktop looks very short even with this amount of text, can we make the text fit the box  or can i controll font size on mobile?

thnx man

On 10/24/2020 at 2:20 AM, gagica said:

@tuanphan on desktop looks very short even with this amount of text, can we make the text fit the box  or can i controll font size on mobile?

 

thnx man

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  figure.gallery-grid-item * {
    font-size: 10px !important;
}
  }
</style>

@tuanphan  Thank you Sir. 

@tuanphan www.robertdeanarchitects.com on landing page where  we added the purple overlay on projects I can't click on them. Is it because we added the code? Can you  help please? my client site is live now.

On 11/7/2020 at 7:45 AM, gagica said:

@tuanphan www.robertdeanarchitects.com on landing page where  we added the purple overlay on projects I can't click on them. Is it because we added the code? Can you  help please? my client site is live now.

 

 

Can you help please @tuanphan 

2 hours ago, gagica said:

Can you help please @tuanphan 

 

Can you remove hover code? I will send the new code

2 hours ago, tuanphan said:

Can you remove hover code? I will send the new code

will that effect the about page bios we did, i want to keep that.

@tuanphan 

@tuanphan  if you can help on these issues it will be great.

 1. Landing page project boxes not clickable ( i know your working on this)

2. Individual projects on mobile showing as 2 column, how do we make them 1 column.

3. About us page, group image on mobile not responsive (can we zoom out so we see them all)

Website: www.robertdeanarchitects.com

Thank you T.

3 hours ago, gagica said:

@tuanphan  if you can help on these issues it will be great.

 1. Landing page project boxes not clickable ( i know your working on this)

2. Individual projects on mobile showing as 2 column, how do we make them 1 column.

3. About us page, group image on mobile not responsive (can we zoom out so we see them all)

Website: www.robertdeanarchitects.com

 

Thank you T.

1. Which code did you use? Can you paste here?

2. Add to Home > Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

3. You mean about banner image?

Add to About Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
}
  }
</style>

@tuanphan

i used this one from you. But again i want to keep the bios i just want the change to happen on landing page where projects are. thnx man.

<style>
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    opacity: 0.90;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
  </style>

<style>
  @media screen and (max-width:767px) {
  figure.gallery-grid-item * {
    font-size: 8px !important;
}
  }
</style>

@tuanphan did you see the code above, is that what you asked?

thnx again.

15 hours ago, gagica said:

@tuanphan did you see the code above, is that what you asked?

thnx again.

Can you add a caption for first image? I will test some code