Jump to content

SamKennedyCS

Member
  • Posts

    3
  • Joined

  • Last visited

Posts posted by SamKennedyCS

  1. Hello!

    I've placed scrolling text on my site, which I've edited with custom CSS.

    I have the base text looking how I want it, but when I hover I want the text to change color, stroke, and shadow color. I can accomplish everything but the stroke. 

    My first attempt used the following, which changed the color and shadow, but made no effect on the stroke. (See m1.png attached)
    m1.png


    .Marquee:hover * {
      text-shadow: 3px 3px #e7756b;
      color: #FFFFFF !important;
      -webkit-text-stroke-width: 3px !important;
      -webkit-text-stroke-color: black !important;

    }

    Next I tried using stroke-width, as opposed to the webkit stroke, but that caused everything within the marquee element to have a stroke, including the hitbox. (See m2.png)

    m2.png

     

    .Marquee:hover * {
      text-shadow: 5px 5px #e7756b;
      color: #FFFFFF !important;
        stroke-width: 3;
      stroke: #000000;

    }

    I've now come upon a solution that applies the stroke to just the text, but now the drop shadow has a stroke too, which appears on top of the text. (See m3.png)

    m3.png

     

    .Marquee:hover * {
      text-shadow: 5px 5px #e7756b;
      color: #FFFFFF !important;
    }

    .Marquee:hover h1 {
       stroke-width: 3;
      stroke: #000000;
    }


    Any thoughts on a solution? I feel like I'm getting close, but I could be wrong.

    I'm grateful for any help! I can share the web address and password if needed.

     

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.