Text to appear on hover

Hello everybody,

Please, can anyone help me with the code for a text bio to appear underneath the picture when the cursor passes to it? 

Quick draft on what I would like to achieve:

Here is the website:

https://caterpillar-antelope-zbjy.squarespace.com/about

password: ptphoto

If you scroll down to 'team' section, I would like the changes to be made for the profile of those 3 members.

Thank you in advance.

Stay safe,
P

Do you want the text to show up on hover or click?

Hover can be done with CSS.

Hi @rwp

Thank you for your time.

I would like the text to appear underneath on hover if possible.

Many thanks,
P

Add the text in to the page, then we can use CSS to hide the text box until the image is hovered over.

@rwp

Some text are coloured, would it make any difference if I add a code block and write the text from there? Thank you for your help!

as rwp said, this can be done via css - using the id of each text block, and hide them.
for example:
#block-yourtext-1 { opacity: 0; }

then you use the id of the image above the text:
#block-yourImage:hover #block-yourtext { opacity: 1; }

You can add some transition for more smoothness too 🙂
I cannot test this so I am not 100% sure but this should work fine.
Note that  I would use "opacity" so the space for the text remains, even if not visible. using "display:none"  might make the height / whitespace moving each time you hover. 

Now in term of usability, it is not ideal to hide this text and make the user hover the image to see it. Why hiding it? Also for mobile users, hover actions are not recommended - it is not working with touch devices.

Hi @rwp Hello @GSv

Hello guys let me write to you shortly. Let me just fix it for now.

Hello @rwp Hi @GSv

To continue with our discussion, I understand you suggested to write the bio in text block but in this case, I wrote it in code block as I need to write a coloured text and justify it. In my little knowledge, this is the only solution I could come up with to give this kind of effect.

To give you an idea as to what I am trying to achieve, I am attaching an image below:

If I hover on Image 1, I would like for the text on code block 2 to appear, leaving code block 1 behind as I want the name to remain as I hover. Please help me with the code for all the 3 images.

website: https://caterpillar-antelope-zbjy.squarespace.com/about

Password: ptphoto

Thank you in advance.

Stay safe,
P

As said above, you should disable this on mobile screens, but I think this is what you are looking to do.

Hovering anywhere over the column will make the text will appear. If you need to specifically hover over just the image, your code block will need to be rearranged, and this CSS completely redone.

If you want the section height to adjust dynamically, we will need to use some javascript as well, as it can't be done with just CSS.

#block-yui_3_17_2_1_1594305600734_17681 {
  transition: transform 0.5s ease-out;
  transform: scaleY(0);
  transform-origin: top;
}

#page-section-5f03043b8b89c14abf50ee92 .row.sqs-row div.col.sqs-col-4.span-4:hover #block-yui_3_17_2_1_1594305600734_17681 {
  transition: transform 0.5s ease-out;
  transform: scaleY(1);
  transform-origin: top;
}

#block-yui_3_17_2_1_1594305994767_16692 {
  transition: transform 0.5s ease-out;
  transform: scaleY(0);
  transform-origin: top;
}

#page-section-5f03043b8b89c14abf50ee92 .row.sqs-row div.col.sqs-col-4.span-4:hover #block-yui_3_17_2_1_1594305994767_16692 {
  transition: transform 0.5s ease-out;
  transform: scaleY(1);
  transform-origin: top;
}

#block-yui_3_17_2_1_1594305994767_19672 {
  transition: transform 0.5s ease-out;
  transform: scaleY(0);
  transform-origin: top;
}

#page-section-5f03043b8b89c14abf50ee92 .row.sqs-row div.col.sqs-col-4.span-4:hover #block-yui_3_17_2_1_1594305994767_19672 {
  transition: transform 0.5s ease-out;
  transform: scaleY(1);
  transform-origin: top;
}

@rwp

Amazing. It worked for me! I am not a techie person but you wrote it a way that I just had to paste it in the CSS and Voila!

One last favour on this matter please.

There is a huge space in between the text and the end of the brown section. I understand it's because that's where the Bio is hidden. If possible, I would like the brown section to scroll up along with the text if no image is selected. 

I appreciate your help and patience.

Thank you and stay safe,
P

That can't be done without JavaScript, which requires a business account and different code.

@rwp

Hi @rwp, thanks for this. I plan to upgrade to commerce this week, can you help me with the code once I have it done?

Many thanks,
P

On 7/13/2020 at 6:57 PM, Ptphotography said:

@rwp

Hi @rwp, thanks for this. I plan to upgrade to commerce this week, can you help me with the code once I have it done?

Many thanks,
P

Have you solved it yet?

On 7/13/2020 at 7:57 AM, Ptphotography said:

@rwp

Hi @rwp, thanks for this. I plan to upgrade to commerce this week, can you help me with the code once I have it done?

Many thanks,
P

Let me know when you have the commerce plan and we can look into it for you.

@rwp 

I have just upgraded to commerce. Thank you for offering your help 🙂

site: https://caterpillar-antelope-zbjy.squarespace.com/about

pw: ptphoto

1 minute ago, rwp said:

Let me know when you have the commerce plan and we can look into it for you.

Which page are we working on? It seems like you have 3 or 4 about pages now.

The one with the click to expand looks nice, that code should work for you, just need to change it to hover if that's what you want.

I will put this on the list for today.

@rwp

I appreciate your patience and kind assistance.

I have updated the domain name and here it is! Please have it check for me. I would like to have the safe effect as I have previously requested, if I click on image 1 (and the rest of the image) I want the text on code block two to appear.  

Please note as this page is yet to be perfected, /about-hover is an unlinked page so please do not confuse it with the main page /about

https://ptphotography.squarespace.com/about-hover

password: ptphoto

Thank you in advance.

Follow the instructions in my signature to do the following. We are not going to use any of the CSS that we used earlier.

1. Generate jQuery script. Put that script in settings -> advanced -> header code injection

2. Put the code below in the PAGE settings -> advanced -> code injection. Don't forget to add <script> before and </script> after.

3. Add CSS to design -> custom CSS

jQuery:

$(document).ready(function() {
  $('#block-e993ac930a681a22485d').slideToggle();
  $('#block-0fc5bc5cbab802374dcc').slideToggle();
  $('#block-01b8c53da0d30f3dc89b').slideToggle();

  $('#block-0ef7c397822d616f2dd6').on('click', function() {
    $('#block-e993ac930a681a22485d').slideToggle();
  });

  $('#block-404f94c8c8296976a7d1').on('click', function() {
    $('#block-0fc5bc5cbab802374dcc').slideToggle();
  });

  $('#block-d4438d0358b5795be950').on('click', function() {
    $('#block-01b8c53da0d30f3dc89b').slideToggle();
  });
});

CSS:

#page-section-5f1044addfa1ef7bff769dd6 figure {
    cursor: pointer;
}

@rwp Got it! Thank you so much for your effort. 

I tried following all of your instructions, however it didn't work for me 😭

Put that script in settings -> advanced -> header code injection

 PAGE settings -> advanced -> code injection

lastly, CSS

Can you please check it for me? I am not sure why it turned out like this, but I am guessing because you looked at the incorrect page? It is my fault, I have given you too many links. 

https://ptphotography.squarespace.com/about-hover

password: ptphoto

I know I'm asking too much but without your help, I don't think I can launch this website. Please help me once again.

Best regards,
P

That all looks right, but you skipped step 1 😉

Remove this, replace with code that you generate from the link in my signature.

Everything else, leave as it is.

@rwp Okay, so it was my fault haha sorry for that. I was so excited to drop the codes that my eyes skipped your important instruction.

Here is the code:

As clear your instructions are,I bet I did something wrong again. The bio text are hidden now but when I hover over the images, nothing comes up. Please help!    

Let me send you a PM......

PM sent, I also updated the code here.

Currently, it shows on click, we can make it show on hover, but hover doesn't work on mobile too well.

@rwp You are too kind 😭

Please, if you can help me with hover, I'd be the happiest person in the world!