This is a really lightweight alternate to an image carousel. Scrolling vertically on computers scrolls the image horizontally.
On touch devices the images can be swiped. There are no bulky supporting scripts to download which makes this an ideal way to display images on a responsive website.
The images can be configured as links and show a link icon for the benefit of mobile device users.
On computers the captions and icons can show on hover.
A Buzz Box is used to draw attention to an important item. This design goes upscale by having the option to have a two color gradient background or an image inserted in three sizes with a lazy loading function.
Links
The Buzz Box can have one internal/external link and an option to add another internal link with lots of styling options.
The height is adjusted using a slider that adds a percetage vertical padding.
Text links aren't used on a responsive website since any link must have about 32px of free space around it to qualify for a mobile friendly link from Google's design criteria.
Any block of text which requires links to related pages should use CTA (call to action) style links below it.
Buzz Links
The link bar shown below could be used for site navigation but it is better to have a vertical navigation instead.
Link Styles
Although hover items are going out of style due to more visitors using touch devices they should still be uprated to professional class by adding a transition to the change of state from onload to hover and vice versa.
Adding an ease transition with a transition time of about 500ms smoothes out the change in state.
Content blocks need to have separation using either an h3 heading or a spacer to make them easier to find and focus on.
The spacer has adjustable height and a solid color or gradient background.
The line has controls for height, percentage width, color and style - dashed, dotted, double or solid.
The little hardly noticeable touches raise a web design to professional class. Items like link backgound smooth hover animation and a fade in animation applied on page load.
Fade in is something you don't notice when it's there but you miss when it's not.
The fade in has adjustable height and animation time and can have a solid or two color background gradient.
