Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
hover

27 Articles
{
,

}
Direct link to the article A Fancy Hover Effect For Your Avatar
gradients hover mask scale

A Fancy Hover Effect For Your Avatar

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and …

Avatar of Temani Afif
Temani Afif on Feb 3, 2023
Direct link to the article CSS Grid and Custom Shapes, Part 3
clip-path css shapes grid hover images

CSS Grid and Custom Shapes, Part 3

After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image …

Avatar of Temani Afif
Temani Afif on Nov 11, 2022
Direct link to the article Fancy Image Decorations: Outlines and Complex Animations
clip-path gradients hover mask outline transition

Fancy Image Decorations: Outlines and Complex Animations

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the …

Avatar of Temani Afif
Temani Afif on Oct 28, 2022 (Updated on Jun 19, 2023)
Direct link to the article Fancy Image Decorations: Masks and Advanced Hover Effects
clip-path gradients hover linear-gradient mask radial-gradient

Fancy Image Decorations: Masks and Advanced Hover Effects

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …

Avatar of Temani Afif
Temani Afif on Oct 21, 2022 (Updated on Oct 28, 2022)
Direct link to the article Fancy Image Decorations: Single Element Magic
clip-path conic gradients hover images mask multiple backgrounds

Fancy Image Decorations: Single Element Magic

As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? …

Avatar of Temani Afif
Temani Afif on Oct 14, 2022 (Updated on Oct 28, 2022)
Direct link to the article CSS Grid and Custom Shapes, Part 2
clip-path css shapes grid hover mask

CSS Grid and Custom Shapes, Part 2

Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.

Here’s just one of the fantastic grids we made together:…

Avatar of Temani Afif
Temani Afif on Aug 22, 2022 (Updated on Nov 11, 2022)
Direct link to the article Zooming Images in a Grid Layout
grid hover implicit grid

Zooming Images in a Grid Layout

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.

Say you want to add some fancy hover effect to …

Avatar of Temani Afif
Temani Afif on Aug 8, 2022
Direct link to the article Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
3d background-clip hover mask-clip

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use …

Avatar of Temani Afif
Temani Afif on May 26, 2022
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 (Updated on May 26, 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 (Updated on May 26, 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 (Updated on Sep 22, 2022)
  • 1
  • 2
  • 3
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top