{"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

Cool Hover Effects series:<\/h4>\n\n\n
  1. Cool Hover Effects That Use Background Properties (you are here!<\/em>)<\/li>
  2. Cool Hover Effects That Use CSS Text\u00a0Shadow<\/a><\/li>
  3. Cool Hover Effects That Use Background Clipping, Masks, and 3D<\/a><\/li><\/ol>\n<\/div><\/div>\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 background<\/code> properties.<\/p>\n\n\n\n