Identify footballer from photo on hover 💻


The idea was to create a cool transition to single out a footballer’s face in pre-match photo when hovering over his name.

I used clip-path to single out each face, it was easy to create the CSS with clippy, it is a nice WSIWYG web editor.

The photo is of German’s starting 11 versus Mexico in their opening game of World Cup 2018. It kind of looks like a police line-up with the effect, they way they played was criminal anyway! :-D

See the Pen Player ID - Germany World Cup 2018 by rob (@robjoeol) on CodePen.

Related Posts