Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Text to appear on hover


Ptphotography

Question

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:

Untitled-1.jpg.dc18a6717473c1107d5492394f1c15bd.jpg

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

Edited by Ptphotography
Link to comment

Recommended Posts

  • 1

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.

Link to comment
  • 1

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;
}

 

Link to comment
  • 1
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1

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;
}

 

Edited by rwp
Link to comment
  • 0

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:

 

ABout.jpg.54eb253615c683ced6bffeadab8c1ad2.thumb.jpg.84ca5bdf001ed739a71f848505602ac6.jpg

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

Link to comment
  • 0

@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

 

 

 

 

Link to comment
  • 0

@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.

Link to comment
  • 0

@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

1604850720_ScreenShot2020-07-16at5_20_49PM.png.1a3c3ee7dd7cae5ca28598114dc9fee1.png

 PAGE settings -> advanced -> code injection

1756763341_ScreenShot2020-07-16at5_26_43PM.png.d1d37c7f20a67a88e012d5544de30b3a.png

lastly, CSS

629730684_ScreenShot2020-07-16at5_27_32PM.png.b5c3f844f15c55cb40bfe7b148040217.png

 

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

Link to comment
  • 0

@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:

913611305_ScreenShot2020-07-16at5_48_27PM.png.5a9ebbcba40a0fa2f8ce048a7ae6f9e6.png

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!    

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...