-1

Let's say I want my website to display "CSS" and, when hovered, make a sliding animation that results in displaying "Cascading Style Sheets". I achieved a similar animation using the font size as a workaround (Fiddle) but I would like the words to slide from the initials.

Any idea on how this could be done using the simplest forms of CSS or JS ?

p span {
  font-size: 0px;
  transition: all 0.3s ease-out;
}

p:hover span {
  font-size: 15px;
}
<p>
  C<span>ascading</span>
  S<span>tyle</span>
  S<span>heets</span>
</p>

1
  • 1
    It is hard to have a width animation without a fixed width with CSS. Aug 11, 2020 at 19:48

2 Answers 2

1

here is a js solution, it could be a bit better because I reuse the same logic in both functions but that works, feel free to change where the listener listens (in this case document)

const mouseEnterHandle = (event) => {
    if (event.target.closest('p')) {
        event.target.closest('p').querySelectorAll('span').forEach(el => {
            el.style.width = el.scrollWidth + 'px';
        })
    }
}

const mouseOutHandle = (event) => {
    if (event.target.closest('p')) {
        event.target.closest('p').querySelectorAll('span').forEach(el => {
            el.style.width = 0;
        })
    }
}

document.addEventListener('mouseover', (event) => mouseEnterHandle(event))
document.addEventListener('mouseout', (event) => mouseOutHandle(event))

document.removeEventListener('mouseover', (event) => mouseEnterHandle(event))
document.removeEventListener('mouseout', (event) => mouseOutHandle(event))
p  {
  overflow: hidden
  display: flex;
}


p:hover span {
    opacity: 1;
}
p span  {
    transition: all 0.3s ease-out;
    width: 0;
    opacity: 0;
    display: inline-flex;
    overflow: hidden;
}
<p>
  C<span>ascading</span>
  S<span>tyle</span>
  S<span>heets</span>
</p>

2
  • That works, thanks. Is it possible to do this in CSS only ?
    – Sileo
    Aug 17, 2020 at 18:43
  • @Rphad I think it is but it depends on what browser you must support. There is clip-path: inset but not very well supported.
    – mttetc
    Aug 17, 2020 at 20:03
1

So, after seeing bluebird's answer, I tried to come up with a CSS-only answer.

I achieved the desired result, the only "trick" here is that it is needed to measure the (approximate) width of the words. Here, they respectively are of 56, 24 and 33 pixels wide. I added the length of a space (3.2px) to the first two.

I tried to put

p:hover > span {
    width:100%;
}

to avoid this case-by-case solution but it then expands too much. If anyone has a more (CSS-only) general solution, this answer would be perfectly completed.

p {
  display: flex;
}

p:hover > #cas {
    width: calc(56px + 3.2px);
}

p:hover > #sty {
    width: calc(24px + 3.2px);
}

p:hover > #she {
    width: 33px;
}

p span {
    width:0px;
    overflow:hidden;
    transition: all 0.3s ease-in;
    transition: all 0.3s ease-out;
}
<!DOCTYPE html>
<html>
<body>
<p>
   C<span id="cas">ascading</span>
   S<span id="sty">tyle</span> 
   S<span id="she">heets</span>
</p>

</body>
</html>

1
  • 1
    That works for non reusable code, if you want to do the same thing with others words you'll have to manually modify values
    – mttetc
    Aug 18, 2020 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.