Hover effects for Grid Gallery Block in 7.0

6 minutes ago, mal1234 said:

Amazing!! Thank you so much @tuanphan! Is there a way to adjust the title font size so it's a slightly bigger? 

edit this

.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
	font-size: 30px !important;
}

Fantastic! Thanks so much again @tuanphan, I really appreciate it! This is slightly off topic for this discussion thread but now I'm trying to make my gallery full width and was wondering if you knew how to do that or if you could point me in the direction of a thread that's covered that topic. Thanks again! 

On 6/23/2021 at 8:57 PM, tuanphan said:

edit this

.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
	font-size: 30px !important;
}

 

how would you edit this to make the title fit completely? so that the end words would go underneath the first words  

On 11/21/2021 at 1:54 AM, Tessmeyer said:

how would you edit this to make the title fit completely? so that the end words would go underneath the first words  

Hi. Can you share link to page where you have problem? We can test code easier

Hello !

Thanks for this topic, it helped me a lot.

My problem is directly related to the topic : How can I have the title/description of the image appears somewhere else when I hover an image in the gallery ?

To be more clear : when I hover an image, I'd like to have the description appearing in another block.

(I search how to show you the page, and I'll post the password and url as soon as it's possible)

Thank you !

13 hours ago, OlivierL said:

Hello !

Thanks for this topic, it helped me a lot.

My problem is directly related to the topic : How can I have the title/description of the image appears somewhere else when I hover an image in the gallery ?

To be more clear : when I hover an image, I'd like to have the description appearing in another block.

(I search how to show you the page, and I'll post the password and url as soon as it's possible)

Thank you !

Can you share site url? We can check easier

3 hours ago, tuanphan said:

Can you share site url? We can check easier

 

https://cello-cheetah-stpl.squarespace.com/

I set a password, hopping it will work : tuanphanpassword

On 3/16/2022 at 4:58 PM, OlivierL said:

https://cello-cheetah-stpl.squarespace.com/

I set a password, hopping it will work : tuanphanpassword

Thank you. Which page are you referring to? I don't see gallery on homepage

20 minutes ago, tuanphan said:

Thank you. Which page are you referring to? I don't see gallery on homepage

Hey !

This is because in the meantime, I managed to resolve my problem. I'll post the solution right on this message :

First block : the gallery

<div id="gallerie_custom">
  <img id="topleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
  <img id="topright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
  <img id="midleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
  <img id="midright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
  <img id="botleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
  <img id="botright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/>
 
  <label class="description-defaut" id="default-desc">!!! Description par défaut !!!</label>
  <label class="description" id="topleft-desc">!!! Top Left !!!</label>
  <label class="description" id="topright-desc">!!! Top Right !!!</label>
  <label class="description" id="midleft-desc">!!! Mid Left !!!</label>
  <label class="description" id="midright-desc">!!! Mid Right !!!</label>
  <label class="description" id="botleft-desc">!!! Bot Left !!!</label>
  <label class="description" id="botright-desc">!!! Bot Right !!!</label>
</div>

Second block : the css

#gallerie_custom{
    position: relative;
    z-index: 3;
    top: 20px;
    width: 500px;
  }
  .image-gallerie{
    width: 200px;
    height: 200px;
    display: block inline;
    position: relative;
    border: solid grey 3px;
  }
  .description-background {
    position: relative;
    /*top: -230px;*/
    z-index: 1;
    height: 200px;
    background: #6AB9D9;
    margin-top: -230px;
  }
  .description, .description-defaut {
    font-family: proxima-nova, sans-serif !important;
    z-index: 2;
    display: block;
    position: absolute;
    top: 550px;
    left: -515px;
    color: white;
  }
  .description {
    visibility: hidden;
    opacity: 0;
  }
  #topleft:hover ~ #topleft-desc,
  #topright:hover ~ #topright-desc,
  #midleft:hover ~ #midleft-desc,
  #midright:hover ~ #midright-desc,
  #botleft:hover ~ #botleft-desc,
  #botright:hover ~ #botright-desc{
    visibility: visible;
    opacity: 1;
  }
  #topleft:hover ~ #default-desc,
  #topright:hover ~ #default-desc,
  #midleft:hover ~ #default-desc,
  #midright:hover ~ #default-desc,
  #botleft:hover ~ #default-desc,
  #botright:hover ~ #default-desc{
    visibility: hidden;
    opacity: 0;
  }

Thanks for you answer, anyway 🙂

On 6/24/2021 at 1:46 PM, tuanphan said:

Add to Design > Custom CSS

/* overlay and title on hover */
.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
	opacity: 1;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}

 

Hi  @tuanphan, this has been helpful. Is there any way of making this work on a home page?

On 3/13/2023 at 5:06 PM, Straggler said:

Hi  @tuanphan, this has been helpful. Is there any way of making this work on a home page?

This should work for all pages. Can you share link to homepage on your site?

Hi @tuanphan, 

Thanks for your code above. I have implemented the hover + title effect. I would like to make it so the titles stay visible on mobile (min-width: 768px). Its ok for the hover effect to still be present, but on mobile I would like to disable the text 'appear on hover' effect and have the text always visible. In addition, I would like to be able to adjust the size of the title text on mobile but not effect the size on desktop.

Here is the page of my site that this pertains to: https://www.ben-cowan.com/color

Thanks in advance!

- Ben

Change the code to this to make it run on desktop only

@media screen and (min-width:992px) {
/* overlay and title on hover */
.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
	opacity: 1;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}
}

Hi @tuanphan,

Thank you for your reply. I was able to get the text to behave the way I wanted.

The last issue I am having is that the text on some of the images is overflowing beyond the edge of the gallery grid block. I would like the text to stack onto a second line when this happens, currently when the text extends past the edge it just appears as a "..." (See attached image). Is there a way to get the gallery grid text to stack onto a second line taking into account the CSS above that we did to get the text to stay in the center of the gallery grid images?

On 10/21/2023 at 2:52 PM, bentcowan said:

Hi @tuanphan,

Thank you for your reply. I was able to get the text to behave the way I wanted.

The last issue I am having is that the text on some of the images is overflowing beyond the edge of the gallery grid block. I would like the text to stack onto a second line when this happens, currently when the text extends past the edge it just appears as a "..." (See attached image). Is there a way to get the gallery grid text to stack onto a second line taking into account the CSS above that we did to get the text to stay in the center of the gallery grid images?

Can you share link to this page? Currently I don't see the text on https://www.ben-cowan.com/color

Hi @tuanphan,

The text should appear if you hover over the images, the issue I am describing happens on mobile if you make the window size smaller to a phone window size. Let me know if you have issues recreating.

On 10/25/2023 at 2:11 AM, bentcowan said:

Hi @tuanphan,

The text should appear if you hover over the images, the issue I am describing happens on mobile if you make the window size smaller to a phone window size. Let me know if you have issues recreating.

Add to Website Tools > Custom CSS

/* Fix image title on mobile */
@media screen and (max-width:767px) {
.image-slide-title {
    white-space: initial !important;
}
}

@tuanphan thanks for all your help in this thread so far! I used the code for a gallery block that uses videos, and I'm having two small issues:

1. I can't figure out why the text/title is getting cut off/cropped.

2. The color overlay on hover is only working on static images, but not on the video thumbnails (that open the video in a lightbox). There's a test static image at the bottom of the gallery that it is working on. Do you know how to fix this?

Website: https://roninproductions.squarespace.com/work 

PW: ronin

On 2/8/2024 at 6:27 AM, mollym said:

@tuanphan thanks for all your help in this thread so far! I used the code for a gallery block that uses videos, and I'm having two small issues:

1. I can't figure out why the text/title is getting cut off/cropped.

2. The color overlay on hover is only working on static images, but not on the video thumbnails (that open the video in a lightbox). There's a test static image at the bottom of the gallery that it is working on. Do you know how to fix this?

Website: https://roninproductions.squarespace.com/work 

PW: ronin

#1. It looks fine to me. Can you take a screenshot?

#2. I don't see video thumbnail on this page