Commons Web Gallery

Mouseover state of thumbnail

Mobile App: Landing view of photo of the day (Left) and how it looks like when info is scrolled up (Right)

Mock up of mouse-over state of thumbnail in the gallery

We've improved the look on the gallery view on the Wikimedia Commons mobile app. With that, we're updating how it looks on the web too to keep it consistent.

Specs

Black Overlay

1. Color: #000000
2. Opacity: 50%

Copy styles

1. Font: Helvetica Bold
2. Color: #FFFFFF
3. Leading: 18px

Copy Drop shadow:

1. Color: #3D9D84
2. Opacity: 43
3. Angle: 47
4. Distance: 2
5. Blur: 0

Copy Sizes:

1. Description/Title: 16pt
2. Photographer: 12pt

Dividing Line

1. Thickness: .25pt
2. Color: #FFFFFF
3. Same drop shadow as copy

Padding:

1. 20px all 4 sides
2. 15px above & below line