Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
hover

19 Articles
{
,

}
Direct link to the article Cool Hover Effects That Use CSS Text Shadow
hover text-shadow

Cool Hover Effects That Use CSS Text Shadow

In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow …

Avatar of Temani Afif
Temani Afif on May 13, 2022
Direct link to the article Cool Hover Effects That Use Background Properties
background background-position hover links

Cool Hover Effects That Use Background Properties

A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot of comments have shown that the same effect can be done using background …

Avatar of Temani Afif
Temani Afif on Apr 27, 2022
Direct link to the article 6 Creative Ideas for CSS Link Hover Effects
hover links

6 Creative Ideas for CSS Link Hover Effects

Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and …

Avatar of Harshil Patel
Harshil Patel on Feb 15, 2022
Direct link to the article Adam Argyle’s Sick Mouse-Out CSS Hover Effect
hover links

Adam Argyle’s Sick Mouse-Out CSS Hover Effect

I was killing some time browsing my CodePen feed for some eye candy and didn’t need to go past the first page before spotting a neat CSS hover effect by Adam Argyle.…

Avatar of Geoff Graham
Geoff Graham on Jan 7, 2022
Direct link to the article Let’s Create an Image Pop-Out Effect With SVG Clip Path
clip-path hover SVG

Let’s Create an Image Pop-Out Effect With SVG Clip Path

Few weeks ago, I stumbled upon this cool pop-out effect by Mikael Ainalem. It showcases the clip-path: path() in CSS, which just got proper support in most modern browsers. I wanted to dig into it myself to get …

Avatar of Adrian Bece
Adrian Bece on Apr 2, 2021
Direct link to the article Want to Write a Hover Effect With Inline CSS? Use CSS Variables.
hover

Want to Write a Hover Effect With Inline CSS? Use CSS Variables.

The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they’re writing the post. …

Avatar of Max Kohler
Max Kohler on Mar 26, 2021
Direct link to the article Long Hover
hover tooltip

Long Hover

I had a very embarrassing CSS moment the other day.

I was working on the front-end code of a design that had a narrow sidebar of icons. There isn’t enough room there to show text of what the icons are, …

Avatar of Chris Coyier
Chris Coyier on Mar 16, 2021
Direct link to the article Scrollbars on Hover
hover scrollbars

Scrollbars on Hover

First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I’m going to cover the …

Avatar of Chris Coyier
Chris Coyier on Jan 20, 2021 (Updated on Jan 26, 2021)
Direct link to the article Using a brightness() filter to generically highlight content
buttons filter focus hover

Using a brightness() filter to generically highlight content

Direct Link

Rick Strahl:

I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of

…
Avatar of Chris Coyier
Shared by Chris Coyier on Sep 11, 2020
Direct link to the article Excluding Emojis From Transparent Text Clipping
emoji hover links

Excluding Emojis From Transparent Text Clipping

CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient.…

Avatar of Geoff Graham
Geoff Graham on Sep 2, 2020
Direct link to the article Bold on Hover… Without the Layout Shift
hover pseudo elements

Bold on Hover… Without the Layout Shift

When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of …

Avatar of Chris Coyier
Chris Coyier on Jul 27, 2020
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top