0

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:

https://i.stack.imgur.com/bD1lk.jpg
(apparantly i need 10 posts for images.. sorry!)

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...

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

// edit:

I have played around a little more and found out, that the space around the triangle definitely is transparent as seen in the following picture:

https://i.stack.imgur.com/7jBIj.png

This means it's not the technique shown by kalley (which is a really nice start, tough!).

user1118321
  • 25,567
  • 4
  • 55
  • 86

1 Answers1

0

You could try something like this: http://jsfiddle.net/Z6fYj/

It requires that you know the background color that it's going to be on top of, but you can see the effect.

.img {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -10px relates to the top position of :before */
    background-position: 0 -10px;
    width: 500px;
    height: 372px;
    position: relative;
    margin-top: 20px;
}
.img:before {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -40px is the opposite of the left property */
    background-position: -40px 0;
    position: absolute;
    width: 0;
    top: -10px;
    left: 40px;
    content: '';
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
}

I'm not sure if that's exactly how facebook is doing it (can't seem to trigger the mouseover manually...), but this can probably give you a start.

kalley
  • 18,072
  • 2
  • 39
  • 36
  • This is a really good start, thanks! I have now updated the initial post. As it turns out, the technique facebook is using definitely is transparent around the triangle. Your solution already suits my needs, but i'm still looking out for a solution, as this really kept me awake some time. –  Jul 09 '13 at 12:28