No. 79 of 106

Overlay Blog Layout

Photo-led story mosaics with the headline on the image.

    On this page
  1. Five stories, text on the photos
  2. Top stories with a live label
  3. One lead, four quick reads
  4. A cover story in the middle
  5. A bento of good reads
NEWSON · ELEMENT NO. 79

The front-page block of blogs, magazines and news sites: 13 arrangements, 8 overlay styles, 6 hover effects, category tabs, a “Breaking” label, numbered stories and swipe on phones — all from your real posts.

13 layouts8 overlayscategory tabsspotlight sliderexpanding panelsswipe on phones
NEWS SITE · FRONT PAGE

Big story on the left, four beside it, a pulsing “Breaking” label and tabs that swap the whole block by section.

big left + 4 smallclassic gradientcategory tabslive label

Top stories

View all news
TECH BLOG · HOMEPAGE

The big story on the left and four stacked strips on the right, on frosted glass, numbered like a “trending” list.

big left + 4 stripsfrosted glassnumbersaccent bar heading

Trending in tech

TRAVEL MAGAZINE · COVER

The lead story stands tall in the center with two on each side; centered titles inside a thin frame feel like a printed magazine.

big centercentered + framecurtain wipebottom-center text

Wander

LIFESTYLE BLOG · HOME

Bento arrangement with clean white text boxes sitting on the photos — calm and very readable.

bentowhite boxlift on hover

This week

DESIGN STUDIO · JOURNAL

Mosaic with tall edges; every photo is tinted in its category’s color and brightens on hover.

mosaicduotonecategory colors
BUSINESS NEWS · SECTION PAGE

A wide hero on top with four stories below. Photos stay black and white until you point at one.

wide hero + 4black & whitefriendly dates
MAGAZINE · MOST READ

Five tall columns, big outlined numbers, just the title until you hover — and the other stories dim so the one you point at stands out.

5 tall columnsreveal on hoverdim the othersnumbers
PHOTO BLOG · ESSAYS

Five columns stepped up and down like a gallery wall, with text on top.

5 staggered columnstop-left textslight turn on hover
BLOG · EDITOR’S PICKS

Hover (or tap) a panel and it opens wide to show the story. On phones it becomes a vertical accordion.

expanding panelscolor tintnumbers
NEWS SITE · SECTION BLOCKS

Two mirror-image arrangements for section fronts. Try the first on a phone: it becomes a swipeable row.

2 on top + 33 on top + 2glass + boxswipe on phones

Technology

More tech