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