Cool Hover Effects that Use Background Properties

Cool Hover Effects that Use Background Properties css-tricks.com4 months ago in #Dev Love36

Some time in the past, Geoff wrote an editorial a few cool hover impact. The impact depends on a mixture of CSS pseudo-elements, transforms, and transitions. A large number of feedback have proven that the similar impact will also be executed the usage of background homes. Geoff discussed that used to be his preliminary idea and that’s what I used to be considering as smartly. It’s not that i am pronouncing the pseudo-element he landed on is unhealthy, however understanding other strategies to reach the similar impact can best be a just right factor. In this publish, we will be able to re-work that hover impact, but additionally enlarge it into different varieties of hover results that best use CSS background homes. You can see the background homes at paintings in that demo, in addition to how we will be able to use customized homes and the calc() serve as to do much more. We are going to learn to mix all of those so we’re left with effectively optimized code! Hover impact #1 Let’s get started with the primary impact which is the copy of the only detailed by way of Geoff in his article. The code used to reach that impact is the next: .hover-1 { background: linear-gradient(#1095c1 Zero 0) var(–p, 0) / var(–p, 0) no-repeat; transition: .4s, background-position 0s; } .hover-1:hover { –p: 100%; colour: #fff; } If we disregard the colour transition (which is not obligatory), we best want 3 CSS declarations to reach the impact. You are most definitely stunned how small the code is, however you are going to see how we were given there. First, let’s get started with a easy background-size transition: We are animating the dimensions of a linear gradient from 0 100% to 100% 100%. That manner the width goes from Zero to 100% whilst the background itself stays at complete top. Nothing advanced thus far. Let’s get started our optimizations. We first grow to be our gradient to make use of the colour best as soon as: background-image: linear-gradient(#1095c1 Zero 0); The syntax would possibly glance a bit of extraordinary, however we’re telling the browser that one colour is implemented to 2 colour stops, and that’s sufficient to outline a gradient in CSS. Both colour stops are 0, so the browser routinely makes the final one 100% and fills our gradient with the similar colour. Shortcuts, FTW! With background-size, we will be able to disregard the peak as a result of gradients are complete top by way of default. We can do a transition from background-size: Zero to background-size: 100%. .hover-1 { background-image: linear-gradient(#1095c1 Zero 0); background-size: 0; background-repeat: no-repeat; transition: .4s; } .hover-1:hover { background-size: 100%; } Let’s introduce a customized belongings to steer clear of the repetition of background-size: .hover-1 { background-image: linear-gradient(#1095c1 Zero 0); background-size: var(–p, 0%); background-repeat: no-repeat; transition: .4s; } .hover-1:hover { –p: 100%; } We aren’t defining –p first of all, so the fallback price (0% in our case) can be used. On hover, we outline a price that replaces the fallback one ( 100%). Now, let’s mix all of the background homes the usage of the shorthand model to get: .hover-1 { background: linear-gradient(#1095c1 Zero 0) left / var(–p, 0%) no-repeat; transition: .4s; } .hover-1:hover { –p: 100%; } We are getting nearer! Note that I’ve presented a left price (for the background-position) which is necessary when defining the dimensions within the background shorthand. Plus, we’d like it anyway to reach our hover impact. We wish to additionally replace the placement on hover. We can do that in two steps: Increase the…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply