The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background Masking CSS Only Technique on Facebook Profile preview Popover

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #149758


    Sorry for the strange topic title, but it’s kinda hard to describe.

    So Facebook displays a “popover” showing a profile-preview of the person on whose name you’re hovering. If you have problems reproducing this, because the popover always appears on top of the name, just scroll down a little, leaving it not enough room to be shown above the name. Here’s an example:


    There’s this little triangle showing its part of the respective background image. What technique was used to achieve this? I haven’t been able to come up with a solution, yet. Since it doesn’t seem to be css3 masking and generating a single image for each picture would be kinda overkill…

    As you can see on Screenshot2, the space around the triangle is definitely transparent..

    And this is my solution so far, but it’s not good enough, because the space around the triangle is not transparent…

    I hope you can help me out here.. Either i’m just using the wrong search queries or the solution is deliberately hiding from me!

    Thanks in advance! Cheers

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.