DEV Community

Cover image for 100 more underline/overlay animations | The upgraded CSS collection πŸ₯‡πŸ₯ˆπŸ₯‰
Temani Afif
Temani Afif

Posted on • Updated on

100 more underline/overlay animations | The upgraded CSS collection πŸ₯‡πŸ₯ˆπŸ₯‰

Ready for the 3rd round? let's go!

As usual: No SVG, No JS, No extra tag, No pseudo element, No keyframes. Only one element and transitions.


Table of content


The Curved

The Irregular

The Unexpected III

The Zig Zag

The Double III

The Arrow

The Circular

The All Sides II

The Fancy III

The Inverted III

The below doesn't work on Firefox due to a known bug

The Buggy

I don't know what happened with the below ones. There is no underline/overlay, they are simply buggy ...

The Morphing II

The Broken

The Arcade


That's it

You are probably wondering until where I can go with such collections? All depend on your reactions β€οΈπŸ¦„!

Discussion (31)

Collapse
inhuofficial profile image
InHuOfficial

Love it once again, spent a good 5 minutes getting my head around how Mario was drawn! (I know, spoilers!)

I am getting pretty tired of praising you now though so all you get is a "good job" this time 🀣🀣 πŸ˜‹

Collapse
icecoffee profile image
Atulit Anand

Ditto haha πŸ˜‚

Collapse
madza profile image
Madza

Insane list πŸ’― Especially arcade ones and the Batman one πŸ™Œ

Collapse
afif profile image
Temani Afif Author

come on! no spoil 😜

Collapse
rgedwill profile image
rgedwill

The batman one!!!!

Collapse
hilmi profile image
Hilmi Hidayat

awesome

Collapse
schleidens profile image
Schleidens_DEV

Seriously you can make a css library with those code .

I hope you will find this interesting

Collapse
marex980 profile image
marex980

Awesome! Batman wins! :)

Collapse
afif profile image
Temani Afif Author

in case you missed it, the previous collection also contain a Batman ;)

Collapse
bravemaster619 profile image
bravemaster619

Fun fact: you can solve the puzzle in his stackoverflow profile to get reach to him

Collapse
danielhansson profile image
Daniel Hansson

Love the design!

Collapse
lkotan profile image
Lutfi Kotan

Very good...

Collapse
oscarrios0101 profile image
Oscar Rios

you are a god

Collapse
afif profile image
Temani Afif Author

another list is released: dev.to/afif/still-100-underline-ov...

Collapse
pawan521 profile image
pawan521

unbelievable;)

Collapse
vishal2369 profile image
Vishal2369 • Edited on

this guy is genius.

Collapse
ianujvarshney profile image
ANUJ VARSHNEY

Wao it's awesome and cool all hovers. Such a very beautiful. There are lot of hover will be help us a lot of enhance skill in CSS. Thank you bro! πŸ‘

Collapse
lalalandgs profile image
lalalandgs

So pretty!

Collapse
allramest83 profile image
Kay Wiberg

Brilliant!

Collapse
motz795 profile image
MOATAZ795

The Morphing II = 5 πŸ‘πŸ‘πŸ‘πŸ‘πŸ‘πŸ‘πŸ‘

Collapse
sojasmine profile image
Sojasmine Gjerstad

I really love your workπŸ₯°.
Thanks for sharing:).

Collapse
afif profile image
Temani Afif Author

another list is released: dev.to/afif/still-100-underline-ov... :)

Collapse
mo7ammedabdulhakeem profile image
mohammed abdulhakeem alqadasi

Great, is it ok to show us the source code?

Collapse
afif profile image
Temani Afif Author

I am not hiding anything, the source is there. Maybe you are not familiar with codepen?

Collapse
mo7ammedabdulhakeem profile image
mohammed abdulhakeem alqadasi

yeah sorry I just found it, thanks a million β™₯

Collapse
klausbert profile image
Klausbert

LOL wonderful!

Collapse
hanhdh22 profile image
hanhdh22

Amazing! Thanks for sharing!

Collapse
afif profile image
Temani Afif Author

I have released another list: dev.to/afif/still-100-underline-ov... :)

Collapse
amorgoliakos profile image
Ilias Prekas

Thanks for sharing!! Great work!

Collapse
afif profile image
Temani Afif Author

Another list is released: dev.to/afif/still-100-underline-ov... :)

Collapse
carolmckay profile image
CarolMcKay

nananananana