DEV Community

Cover image for 100 underline/overlay animations | The ultimate CSS collection 🥇

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif on March 16, 2021

Get tired searching animations for your menu items and links? Search no more! Here is a list of more than 100 different animations. From the simple...
Collapse
 
madsstoumann profile image
Mads Stoumann

Amazing collection! I used the "Basic 3" on a recent project, but had a CSS validation error, that boiled down to linear-gradient(currentColor 0 0).
Is that a short way of writing linear-gradient(to bottom, currentColor 0 0, currentColor 100% 0)?
And, as to bottom is default, that can be omitted I guess?

Collapse
 
afif profile image
Temani Afif

It's the short way of writing linear-gradient(currentColor,currentColor). The direction and the color stops aren't important since a gradient between two same colors will always give that color. I am defining two colors stop for it (0 and 0) to write the color only once inside the gradient.
The syntax I am using is a bit uncommon but it's valid. The CSS validator is never up to date anyway.
I wrote a recent article about this if you want: css-tricks.com/cool-hover-effects-...

Collapse
 
madsstoumann profile image
Mads Stoumann

Cool, didn’t know that syntax!

Collapse
 
krishan111 profile image
Krishan111 • Edited

You are really hardworking @afif 👍

Collapse
 
afif profile image
Temani Afif

thanks :)

Collapse
 
jamesqquick profile image
James Q Quick

This is incredible!

Collapse
 
mjcoder_5 profile image
MJCoder

Awesome collection - bookmarked! I am sure I'll be using this!

Collapse
 
kievandres profile image
Kiev Andres

Awesome! 🔥

Collapse
 
conradsollitt profile image
Conrad Sollitt

Wow incredible job Temani!!

I think I'll try out some of these in apps I'm developing on at work soon! Probably will try or at least consider these for future public facing sites I work on in the future as well.

My favorite are the 3D and Fancy ones at the bottom but I think for basic Db Web Apps I might use "The Basic" or "The All Sides" as I feel they provide just enough visual effects for a user to think "that's nice" but not distract from the site or task at hand.

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
conradsollitt profile image
Conrad Sollitt

Great job! These are awesome, your CSS skills and design are incredible!

Collapse
 
genevievecurry profile image
Genevieve Curry

Great job on putting this collection together!

I'm rather partial to The Double and The 3D :)

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
icecoffee profile image
Atulit Anand

I'm loving it!
There are some people who can use every single animation as a different post for a series actually and then there's this guy.
Great minds

Collapse
 
afif profile image
Temani Afif

thanks :) will probably create more posts like this in the future ;)

Collapse
 
jbalagnaranin profile image
Jérémie Balagna-Ranin
The Inverted
The below doesn't work on Firefox due to a known bug
Enter fullscreen mode Exit fullscreen mode

Tested just now on Mac OS with Firefox 86.0.1, and it works well ;)

Otherwise, Thanks a lot for the ideas... I just like the inverted :D

Collapse
 
afif profile image
Temani Afif

good, probably the bug occur only on Windows OS then.

Collapse
 
dav3rs profile image
⚜Dave.rs⚜

It is really impressive. Could you make youtube tutorials explaining the technique you use to achieve these effects? I would like to learn.

Collapse
 
afif profile image
Temani Afif

Will think about this in the future. I never made tutorial videos but would be good to start doing it ;). In the meantime, If you have a question or you need a clarification about a particular effect I can explain you via comment

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

That is indeed commendable. So many variations for a single state.

Collapse
 
moaaz_ibrahim profile image
Moaaz Ibrahim

Wow
Great work 👏

Collapse
 
creativemacmac profile image
creativemacmac

I LOOOOOOVE your pure css effects🤩 is it possible for you to do a series on mouse cursor effects?

Collapse
 
afif profile image
Temani Afif

what kind of mouse cursor effects? can you show me examples :)

Collapse
 
creativemacmac profile image
creativemacmac

I think for one this one is crazy cool (unfortunately just a video)
youtube.com/watch?v=OYEymzptnHc

but would be soooo interesting to see what you would come up with with pure css regardless of whether the above is interesting to you or not...I read your posts religiously :)

Thread Thread
 
afif profile image
Temani Afif

ok I will keep this in mind ;) I always like to challenge my self as well

Collapse
 
fredperes profile image
Fred Peres

Wow! Nice work!

Collapse
 
oliviercreativ_74 profile image
Démontant

Thanks :D

Collapse
 
phil_lgr profile image
Phil Léger

Massive, thanks for sharing!

Collapse
 
d7460n profile image
D7460N

Thanks for the time and effort you put into this fantastic list!

How do you get the animation to wrap with the link text?

Thanks again!

Collapse
 
afif profile image
Temani Afif

well, most of them are not meant to work on wrapped text. I made them for menu item, short link, buttons, etc so only one line ... if you have a specific animation you want to wrap with text I can help you with

Collapse
 
d7460n profile image
D7460N

Thank you! "The Infinite" #2 animation would look nice when wrapping with text IMHO. Thank again!

Thread Thread
 
afif profile image
Temani Afif

here is with wrapping : jsfiddle.net/que6njpo/ .. you simply need to remove the display:inline-block ;)

Collapse
 
canbax profile image
yusuf

very nice archive for animations.

Collapse
 
nove1398 profile image
nove1398

This is awesome, well done

Collapse
 
calsch profile image
CalSch

These all look amazing! My favorite is fancy-1. Good job!

Collapse
 
polgarj profile image
Jozsef Polgar

Thank you very much. I used the 8th one from the "The All Sides" pack in my new blog and it turnet out awesome. :)

Check it out: uselessdivs.com/

Collapse
 
__victorchan profile image
Victor Chan

great work, appreciate it!

Collapse
 
franklinuopeople profile image
Franklin Siqueira

Thanks for your the hard work and for sharing that with the community!

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
krishdevdb profile image
Krish Gupta

How About the ones that are half background colored already and half happens on hover?

Collapse
 
afif profile image
Temani Afif

I didn't understand what you mean?

Collapse
 
krishdevdb profile image
Krish Gupta

The effect in which the bottom border changes to be a background.

CodePen Example: codepen.io/geoffgraham/pen/GXoOdK

Thread Thread
 
afif profile image
Temani Afif

The Thick #2 and #3 are almost similiar to what you are showing me ;) They simply have an extra transition than you can remove if you want.

Collapse
 
carolmckay profile image
CarolMcKay

Hmm, favourite? So many! mix-blend-mode: difference; might be an alternative to the background-clip: text.

Collapse
 
afif profile image
Temani Afif

mix-blend-mode won't work because I am using only one element but yes if you consider an extra wrapper for the text then it can work but in such case I would simply use pseudo element to seperate the layers (ex: jsfiddle.net/ov91mjfx/) but I wanted to challenge myself and do all of them with no pseudo element, no keyframes, no extra element, etc ;)

Collapse
 
dothebart profile image
Wilfried Goesgens

we want a Version that can play arkanoid! ;-)
Cool stuff!

Collapse
 
afif profile image
Temani Afif

Here you go with another list: dev.to/afif/100-more-underline-ove...

Arkanoid is there! :)

Collapse
 
afif profile image
Temani Afif

well, why not. A crazy person like me can come with such crazy idea :) maybe in the next collection, stay tuned ;) [yes there is another collection coming! ]

Collapse
 
simida0852 profile image
Jerusalems

Amazing css collection. Thanks!

Collapse
 
afif profile image
Temani Afif

I have released more collection if you are intrested :) dev.to/afif/series/12016

Collapse
 
haaami01 profile image
G. Szabi

thanks for the tips

Collapse
 
gksvg profile image
Guatam Kumar

Awesome Bro

Collapse
 
bigol profile image
José Santos Silva

Very good work.

Collapse
 
martygo profile image
Martins Gouveia

Very good! Very good and useful. You must have done a lot of work, congratulations.

Collapse
 
singhkunal2050 profile image
Kunal SIngh

loved the varitions

Collapse
 
diogoxiang profile image
Diogoxiang

very nice!
Amazing css collection. Thanks!

Collapse
 
zippytyro profile image
Shashwat Verma

Damn, how much did you spent making this?

Collapse
 
afif profile image
Temani Afif

I don't remember exactly because each time I get an idea I add it to the collection until I reached the 100 but I would say around 1 week and a half from when I got the idea to the release of the article

Collapse
 
zippytyro profile image
Shashwat Verma

Love the efforts you're putting in

Collapse
 
elvisduru profile image
Elvis Duru

This is cool stuff @afif . Thanks for sharing!

Collapse
 
aglamadrid19 profile image
Alvaro Lamadrid

Lovely

Collapse
 
jayarghargh profile image
Justin R

i <3 these! Thanks for sharing

Collapse
 
7ovo7 profile image
Marco Colonna

I like learn CSS and I like this post 🙂

Collapse
 
jadenconcord profile image
Jaden Concord

This is the best animation/hover article

Collapse
 
webdevwanderer profile image
webdevwanderer

This article brought me here ;)
Awesome!

Collapse
 
marcellothearcane profile image
marcellothearcane
Collapse
 
shahstavan profile image
Mr.Shah

Man hats-off you. I loved the efforts you made. Thanks a lot Man👍🏻

Collapse
 
asksock profile image
Ngô Quang Đạo (AskSock)

Such an awesome stuff!
Amazing! Good job!

Collapse
 
geminii profile image
Jimmy

All these effect are really awesome. So nice work. Congratz 🎉

Collapse
 
z2lai profile image
z2lai

What in the world, animations with just background and background-position? That's the most ingenious CSS trick I've ever seen. And all of these effects are so slick. You sir are a genius!

Collapse
 
afif profile image
Temani Afif

Thanks :)
This is only a small portion of what CSS can do. I still have more magic to show in future articles ;)

Collapse
 
signo profile image
L

Awesome work, love the Fancy #4 :)

Collapse
 
atabak profile image
atabak

Wow

Collapse
 
xuannguyen291020 profile image
xuannguyen291020

Thanks for your sharing! <3

Collapse
 
kirzin profile image
0xKirz

wow this is awesome thank u for this

Collapse
 
zeked profile image
Zeke-D

This is gorgeous. Thanks so much for this resource. If i had to pick a favorite, i think there’s something beautiful about inverted #6.

Collapse
 
saviomartin profile image
Savio Martin

This is amazing. thank you!

Collapse
 
aalphaindia profile image
Pawan Pawar

Wow, so nice!

Collapse
 
graykim profile image
gray-kim

awesome! Thanks.
I like 'The All Sides #6'

Collapse
 
vivirenremoto profile image
Miquel Camps

awesome! good job Temani :)

Collapse
 
chema profile image
José María CL

Wow, so nice!

Collapse
 
funbeedev profile image
Fum

Amazing collection. Thanks!

Collapse
 
red2021 profile image
Redwei🇨🇳

这个很棒!! This is great! !

Collapse
 
danielignatov profile image
Daniel Ignatov

Amazing stuff!

Collapse
 
simus51 profile image
simus51

Love these! And the second collection. Thanks so much.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good job there is a lot to be learned here.

Collapse
 
dwighthaul_52 profile image
Paul Hubert

Amazing, it's fun how IHM can be "alive" with few lignes of css

Collapse
 
dreamcreatordev profile image
ryanB

Excellent

Collapse
 
afif profile image
Temani Afif

you're welcome. Wait for more collection like this ;)

Collapse
 
zombierobo profile image
Hasmukh Suthar

I’m not sure if it’s only me but I can’t seem to see previews of any of the animations in the post body on my ios chrome. It’s a good post Thank you, I’m gonna check it out on my computer :)

Collapse
 
afif profile image
Temani Afif

are you able to see the "Hover me" text? or you cannot see the codepen preview at all?

Collapse
 
zombierobo profile image
Hasmukh Suthar

Everything under heading ‘The Unexpected’, ‘The Rounding’... etc

Collapse
 
iamrohitsawai profile image
Rohit Kiran Sawai

How can you do such a cool things?

Collapse
 
afif profile image
Temani Afif

If you want to do it then you can do it :)

Collapse
 
akamosthappyman profile image
zhang

Amazing!!!

Collapse
 
dome68 profile image
Domenico

Nice work!

Collapse
 
aniketmde profile image
Aniket Deshbhratar • Edited

why search effects on google after this post :D
thanks man

Collapse
 
ardianta profile image
Dian

awesome, thank you for sharing

Collapse
 
capscode profile image
capscode

nice collection, really :)

Collapse
 
afif profile image
Temani Afif

I have released more collection if you are intrested :) dev.to/afif/series/12016

Collapse
 
r3zu3 profile image
Renzo Zue

Amazing, i love it

Collapse
 
mbappai profile image
Mujahid Bappai

Awesome man! Reminded me just how little I know css😅

Collapse
 
kuldeepkumar9935 profile image
kuldeepkumar9935

It's really a great work

Thank you for this eg..

Collapse
 
lam442 profile image
Luis

Thank you! This is great

Collapse
 
jaybear profile image
Jens
  • The Fading (2)
  • All Sides (5) ... may be both contrasted: blue text & black frame or opposite! And: THANKS for sharing! ;)
Collapse
 
sadaqa_yousef profile image
Yousef Sadaqa

Very useful content, Thank you

Collapse
 
markhu profile image
Mark • Edited

Most of these are about as obnoxious as the infamous old <flash> attribute. But I do like Rounded #5. That's feasible in a real app.

Collapse
 
arorasumit profile image
Sumit Arora

Love them looks great. Nice work 😀

Collapse
 
thepingouinface_19 profile image
Thepingouinface

Thank you !! 🔥

Collapse
 
kvind profile image
kvind

Wow, really impressive!
Great job! :-)

Collapse
 
conteahnl profile image
ConteaHNL

Amazing work. Thanks for sharing. The only problem with these effects is that they rarely works when the text breaks across multiple lines

Collapse
 
afif profile image
Temani Afif

It's not a problem, I explicitely made them to work on menu items, short links, button, etc so only one line of text

Collapse
 
abdulkalam1233 profile image
Abdul kalam Shaik

I am not a CSS guy but this article made me think think about becoming a CSS dev.

Thanks @afif

Collapse
 
alexbrasileiro profile image
Alex Brasileiro

fucking amazing work Temani... 😱

Collapse
 
heizenburg profile image
Thato Sello

Great job brother...

Collapse
 
andrewbaisden profile image
Andrew Baisden

Agreed its pretty awesome.

Collapse
 
chaveamin profile image
chaveamin • Edited

What's the variable value for --p and --d
and I assume we can't add a border radius to the "All Sides"

Collapse
 
afif profile image
Temani Afif

I am using the variables to make the code shorter so for example instead of using background-position:0% 100% and on hover I make it background-position:100% 100% I use a variable inside the first definition to have var(--p,0%) 100% and later I simply change the value of the variable and make it --p: 100%.

And no, we cannot use border-radius. I will probably prepare another list with radius ;)

Collapse
 
zekeosborn profile image
Zeke Osborn

Nice. Thx

Collapse
 
kosovych profile image
Yaroslav Kosovych

Looks like you have very creative designer in you project

Collapse
 
saksoomro profile image
Shoaib

where is the source code link

Collapse
 
sly001029 profile image
Sly001029

I want to automatically create an underline and then automatically remove the underline, what should I do? Could you help me?