With the new Facebook image gallery redesign, images are displayed using white padding as separation. It works well most of the time but fails for images with a light background.

To get around it, a 1px semi-transparent border is applied inside the image. This way it doesn't affect dark images and makes a cleaner separation for light ones.

Without border

With border

How to

Here's the CSS magic:

.image:after {	
  border: 1px solid rgba(0, 0, 0, 0.1);
  content: '';
 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Conclusion

It's a very small change but it makes the gallery look a lot better. If you are displaying images in a white background without borders, you might consider using this trick too 🙂

If you liked this article, you might be interested in my Twitter feed as well.
 
  • http://www.facebook.com/pwh Pete Hunt

    We also considered using the outline css property but it's not as well supported across browsers.

  • Darathor

    I did the test and I took some time to get something that works because I had the class "image" on my images directly.

    To make it work, it must be applied to a container (like a li or link around the image)...

    (ça fait bizarre de se compliquer la vie à écrire en anglais pour s'adresser à un français mais bon, l'article étant en anglais...)

  • http://www.facebook.com/vjeux Christopher Chedeau

    Oh yeah, I forgot about this. In order to display non square images in a square viewport, we do it in two ways:

    - A div with overflow: hidden around our tag images.
    - Or we use a div with a background-image and background-size: cover.

    It happens that this CSS is working with both, so I didn't pay attention it wasn't working on plain images 🙂

    If you want a solution that works on , here's one:

    img {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;

    }

    However, it has several drawbacks.
    (1) It doesn't work on old browsers.
    (2) If you use it on many images on Safari, it causes major performance issues, scrolling isn't smooth at all. For some reason it takes a lot of time to render compared to the other method.
    (3) The z-index of the outline is completely ignored on some browser I forgot. If you are displaying a layer ontop of the image, the border is going to be rendered above. It makes some interesting effects but we don't really want it 😛

  • alvinwoon

    and position:relative needs to be applied to the DIV as well 🙂

    Awesome blog btw. I learned so much from the different photo grids algorithm posts.

  • http://www.onchannel.net/ Onchannel Movies

    how can i add a transparent border on a custom image showing only when is mouse on hover? i have the code live on http://www.onchannel.net , the static image has a solid black border, when hover it shows a red border but the center hover image is showing the same red border. how can i have the image hover with a transparent border?

    thanks in advance for your reply

  • Pat Leck

    still researching an easier way to get it done.
    http://amzn.to/1cvkNm2

  • ling maaki

    More about..CSS Transparent Borders
    Ling

 

Related Posts

  • August 14, 2012 Image Layout Algorithm – Facebook – Reordering (2)
    In this article, we are going to see how to support dynamic updates to Facebook Image Layout Algorithm. Beware, this is not an easy task and there are many special cases to handle :) Making images bigger To make images bigger we just run the algorithm all over again with the new […]
  • September 14, 2011 CSS – One Line Justify (24)
    I came across a CSS problem, text-align: justify does not work with only one line. Justify behavior The reason is because it has been designed with paragraphs in mind. It justifies all the lines but the last one. Normal Justify Lorem ipsum dolor sit amet, consectetur […]
  • August 13, 2012 Image Layout Algorithm – Facebook (1)
    Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px For the redesign of the Photo Section of Facebook we wanted to highlight some photos by making them bigger. It all started with the following mock by Andy Chung: Layout Alternated Blocks My […]
  • June 8, 2012 CSS – Absolute position taking into account padding (6)
    When looking at the code of Lightbox.com I remarked that they are not using top and left in order to position their images but margin-top and margin-left. I've been wondering why for some time and finally found the reason. It is a way to position absolutely elements in a container and […]
  • July 7, 2012 CSS – Understanding Percentage Background Position (9)
    In this article, I'm going to guide you through a concrete problem I had to solve. Eventually, we'll see how to use percentage values in the background-position CSS property and how it solves a lot of tough issues. Usual way Positioning the image The usual way to position images […]