{"id":365383,"date":"2022-04-27T07:20:07","date_gmt":"2022-04-27T14:20:07","guid":{"rendered":"https:\/\/css-tricks.com\/?p=365383"},"modified":"2022-05-26T07:13:05","modified_gmt":"2022-05-26T14:13:05","slug":"cool-hover-effects-using-background-properties","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/cool-hover-effects-using-background-properties\/","title":{"rendered":"Cool Hover Effects That Use Background Properties"},"content":{"rendered":"\n
A while ago, Geoff wrote an article about a cool hover effect<\/a>. 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 properties. Geoff mentioned that was his initial thought and that\u2019s what I was thinking as well. I am not saying the pseudo-element he landed on is bad, but knowing different methods to achieve the same effect can only be a good thing.<\/p>\n\n\n\n\n\n\n\n In this post, we will re-work that hover effect, but also expand it into other types of hover effects that only use CSS Cool Hover Effects series:<\/h4>\n\n\n
background<\/code> properties.<\/p>\n\n\n\n