CSS hover effect - CTA with filter and text reveal

Posted: 23 July, 2020

This animated cta has a custom color filter made with an svg ColorMatrix element. Using this type of filter you can get a 'color graded' or 'color mapped' look to a photo where it is essentially converted to a duotone image. This particular application of the filter used a dark blue as the duotone with white for highlights. On hover the cta title slides upwards, a small triangle is animated into place, and the cta content text appears under the title section.