Using a two column grid to display images with a caption/description and a link option has a number of advantages in terms of layout and download efficiency.
Responsive Grid
Animation On Scroll
On scroll animations occur as the visitor scrolls the page so they have control over the intensitiy of the animation.
In the example below the images rotate and scale up on scroll down. The perspective is set to 150 vw (viewport width units).
Follow the link below to see the effect applied to content width, lazy loading images …
ThemeKit UI Scroll Grid
Layout
GridThe two column grid is shown here with equal relative column widths and the alternating option.
The containers have the optional border and bottom .box shadow
Items
ContentEach item is an HTML5 <article> element set up as a two column grid one with an image and the other with text.
The layout of alternate rows can be switched if required.
Images
Lazy LoadThe images have alt text and a lazy loading option and have controls for adding a border and/or a bottom box shadow to improve definition and add "depth".
Swing Hero
Text Area
SpanThe text area has a heading, text and options for styled spans and links.
The links can be globally switched to open internal or external pages and have common link text if required
On Scroll Animation
The animation occurs as each item enters the viewport and has options for setting …
✱ Initial rotate angle
✱ Fade in from zero opacity
✱ Imitial rotate-X angle
✱ Scale up
✱ Animate out