Articles Tagged
hover
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 …
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 …
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? …
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:…
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 …
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 …
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 …
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 …
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 …
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.…