Customize additional hover text

Site URL: http://www.hanawuerker.com

Hi there, 

I'm a filmmaker hoping to upgrade my website. Currently, when I hover over an image on the EDITOR page, I can just bring up one font that displays the title. I'd love to be able to make a subtext on that hover as well that could add some additional information. So for example it would be: 

On hover -- LARGE BOLD TEXT "Name of Film (Year)" 

smaller text below in italics: "Documentary Series" 

Is this possible to do? 

Thanks! 

Hi @hansyolo

Follow my below steps:

1. Open the editor page in the Squarespace editor view and next to each image title add a dash (-) character followed by the subtitle you want to add for that image. Make sure to repeat this step for all of the images on the page before moving to the next step.

2. From the Squarespace left panel click on Website > Pages > Website Tools > Code Injection.

Paste the following Javascript code in the Footer container:

<script>
  const allTitles = document.querySelectorAll('.index-item-title-text');
  allTitles.forEach(el => {
      const textContent = el.innerText.split('-');
      const title = textContent[0];
      const subtitle = textContent[1];
      el.innerText = title;
      subtitle && el.insertAdjacentHTML("afterend", `<br/><span class='index-item-subtitle-text'>${subtitle}</span>`);
  });
</script>

3. Again from the left panel click on Website > Pages > Website Tools > Custom CSS and paste the following CSS code:

.index-item-subtitle-text {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 24px;
    font-style: italic;
}

Look forward to hearing your feedback 😄!

Mahmoud

Hi thanks so much! I just realized I can't do any coding unless I upgrade my subscription. Have to think on if it's worth it. Really appreciate it and will flag this post ! 

Hey @hansyolo

No problem, here's an alternative solution using some tricky CSS code:

/* Image #1 */
div[data-collection-id='5ef4016ac4cf400a7fb8b5d5'] 
.index-section:nth-child(1) 
.index-item-title-text::after {
    content: "Documentary Series";
    display: block;
    margin-top: 1.5rem;
    font-size: 24px;
    font-style: italic;
}

The above code applies the subtitle to your first image only, you have 11 images so copy and paste the above code 11 times inside the Custom CSS panel.

Each copy of the code has two things you need to adjust:

1.  The number of the image that you need to add between the brackets at the 3rd line of the above code.

2. The name of the series between the quotes at the 5th line of the above code.

As you see, it's a repetitive code but at least a workaround for the disabled code injection.

Let me know if this works!

Mahmoud