Gallery Block: image description rollover

Hi everyone,

I have achieved, with the amazing help from the forum, to add some hover effects to the images in my gallery block. There is one final thing I would like to add on hover, the client name, to appear top left of the image. (Reference: the top left image with the orange overlay)

I already have the title appearing in the middle, but would like the client name to appear top left. In the settings, I can add information into the box below the title (see screengrab). Then I was wondering if there are attributes/effects I can associate with that content to make this happen.

https://chameleon-copper-hgx3.squarespace.com/
password: gravy2024

Thanks
Laura

_________________________________________________

The current CSS I am using for all the other effects is here:

//Title appear and colour overlay in gallery block//
.slide a:after {
    position: absolute;
    content: "";
      display: block !important;
    background: rgba(236,112,8,0.8);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    pointer-events: none;
      padding: 35px;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
    opacity: 1;
}
.image-slide-title {
    font-size: 20px !important;
    font-weight:normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%!important;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
    pointer-events: none;
      padding: 50px !important;
      line-break: normal;
    white-space: initial !important;
      text-align: center !important;
      text-justify: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}
 

Something like this?

Hi @tuanphan,

Yes!

Do you use Personal or Business Plan? If Business Plan or higher, we will have a shorter code

But if Personal Plan, it is a quite manually

Let me know, then I will check & give code for some items, then you can do for other items

@tuanphanIt is a business plan, Thanks

First editing this

to this

Helping a bank to be itself <span>CLIENT NAME</span>

Next, use this code  to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

You will have this

Next, add this code to bottom of Custom CSS box

.slide .image-slide-title {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.image-slide-title span {
    position: absolute !important;
    top: 80px;
    left: 80px;
    z-index: 999999;
}

Hi @tuanphan,

You're a genius thank you!

Would it be possible to:
1) Decrease the size & change the font family of just the client name?
OR if it's not possible to change the font family, then
2) Just have the client name smaller than the middle text?

Then on mobile just have the name and title visible all the time with the grey overlay?

Thanks
Laura

 

Another thing I have noticed. I have two gallery blocks on my site and I only want the hover effects to occur on the homepage gallery blocks. Is there a way to just isolate my hover code to just the homepage gallery block? The other gallery block is where the logos are on the about us page https://chameleon-copper-hgx3.squarespace.com/aboutus

15 hours ago, dotandpeg said:

Another thing I have noticed. I have two gallery blocks on my site and I only want the hover effects to occur on the homepage gallery blocks. Is there a way to just isolate my hover code to just the homepage gallery block? The other gallery block is where the logos are on the about us page https://chameleon-copper-hgx3.squarespace.com/aboutus

Remove above CSS code

Add this code to Homepage Header Code Injection

<style>
  .slide .image-slide-title {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.image-slide-title span {
    position: absolute !important;
    top: 80px;
    left: 80px;
    z-index: 999999;
  	font-size: 10px !important;
  	font-family: monospace !important;
}
</style>

On 2/15/2024 at 1:14 AM, dotandpeg said:

Hi @tuanphan,

You're a genius thank you!

Would it be possible to:
1) Decrease the size & change the font family of just the client name?
OR if it's not possible to change the font family, then
2) Just have the client name smaller than the middle text?

Then on mobile just have the name and title visible all the time with the grey overlay?

Thanks
Laura

 

I added to above code

@tuanphan  Brilliant, that has worked.

Thank you, it is looking great. I've been able to change the font and the weight etc. for the client name which is exactly what I wanted to do.

There are a couple of things that I need to try and fix for mobile:
- Can all the text left align for mobile?
- Can the text be visible on mobile all the time, no rollover
- Can the grey overlay be visible all the time so the text is legible

I have two gallery blocks on my site and I only want the hover effects to occur on the homepage gallery blocks. Is there a way to just isolate my hover code to just the homepage gallery block? The other gallery block is where the logos are on the about us page https://chameleon-copper-hgx3.squarespace.com/aboutus

Thanks again.

I also meant to say that I have got this code in my CSS code. D you think some of it is conflicting with what we've just added?

//Gallery Grid: masonry//
img:hover{transform: scale(1.05)}
img:hover{transition:(1000ms)}

//Title appear and colour overlay on gallery block images//
.slide a:after {
    position: absolute;
    content: "";
      display: block !important;
    background: rgba(85,98,94,0.8);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    pointer-events: none;
      padding: 35px;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
    opacity: 1;
}
.image-slide-title {
    font-size: 24px !important;
    font-weight:normal;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%!important;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
    pointer-events: none;
      padding: 50px !important;
      line-break: normal;
    white-space: initial !important;
      text-align: center !important;
  font-family: "Libre Baskerville";
      text-justify: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}
 

I also realised that when I resize the homepage the main title in the middle gets very close to the edges. I have tried to adjust the padding but have no made it work. Do you have ay ideas?