Subscribe to @NetNinja
Visit for more tips and tricks!
Is a nice little CSS hover effect which Makes it look like some text is being Highlighted so in the HTML we just have An H1 with a class of highlights in the CSS we can see that we apply some basic Styles to the Highlight class we also Apply a background image to be a linear Gradient which goes between two Identical shades of pink that just Results in a pink background color However that ground image means we can Play around with its size and position As well as set no repeat the two Properties we want to transition on Hover are background size which starts At 10 pixels in width and 100 in height And background position which is top Left on Hover we transition those Properties to full width and top right Each one is transitioned separately and There's a delay on the background size One so the position transitions first You can also apply the transitions in Reverse order for when you come off the Hover State and in a browser we can see That highlight hover effect awesome
