Pens from Chris Blackford https://codepen.io/webmotion/ en nospam@codepen.io Copyright 2024 2013-12-24T02:14:20-07:00 automanual-K gallery https://codepen.io/webmotion/pen/kBMvoW https://codepen.io/webmotion/pen/kBMvoW Chris Blackford

See the Code - See it Full Page - See Details

double transition between frames: automatic while the cursor is outside the gallery and manual on :hover

]]>
automanual-K gallery 2013-12-24T02:14:20-07:00
Plugin Mosaic Gallery https://codepen.io/webmotion/pen/kPVXPb https://codepen.io/webmotion/pen/kPVXPb Chris Blackford

See the Code - See it Full Page - See Details

Created with jquery, a simple gallery of images adjustable

]]>
Plugin Mosaic Gallery 2013-12-24T02:12:27-07:00
News Gallery https://codepen.io/webmotion/pen/AgqZaw https://codepen.io/webmotion/pen/AgqZaw Chris Blackford

See the Code - See it Full Page - See Details

It's a simple news gallery, where we use only a list of images. With jQuery we creates thumbnails and code for hover events.

]]>
News Gallery 2013-12-24T02:11:38-07:00
Responsive Gallery w/ CSS Hover Animations https://codepen.io/webmotion/pen/AmvaeP https://codepen.io/webmotion/pen/AmvaeP Chris Blackford

See the Code - See it Full Page - See Details

A CSS3 gallery effect to add to my arsenal

]]>
Responsive Gallery w/ CSS Hover Animations 2013-12-24T02:09:52-07:00
Simple JavaScript image gallery https://codepen.io/webmotion/pen/DvbvNN https://codepen.io/webmotion/pen/DvbvNN Chris Blackford

See the Code - See it Full Page - See Details

* no library * use a CSS transition on opacity for fade-in/ fade-out effect * obviously transitions won't work in IE9 and neither will classList but these two are only connected to the fade-in/ fade-out effect and switching should still work * I've used `.addEventListener`, switching won't work in IE8 and older

]]>
Simple JavaScript image gallery 2013-12-24T02:08:15-07:00
Responsive Employee or Team Gallery with smooth scroll https://codepen.io/webmotion/pen/nYBdyX https://codepen.io/webmotion/pen/nYBdyX Chris Blackford

See the Code - See it Full Page - See Details

I wanted to create a Employee Gallery for a project I'm currently working on. Hope someone finds this useful. I had a little help from some kind folks at Stack overflow in the JS part. All in all it was a fun little project. The responsive framework is Amazium. http://www.amazium.co.uk/

]]>
Responsive Employee or Team Gallery with smooth scroll 2013-12-24T02:06:45-07:00
Responsive Employee or Team Gallery with smooth scroll https://codepen.io/webmotion/pen/nVgqvY https://codepen.io/webmotion/pen/nVgqvY Chris Blackford

See the Code - See it Full Page - See Details

I wanted to create a Employee Gallery for a project I'm currently working on. Hope someone finds this useful. I had a little help from some kind folks at Stack overflow in the JS part. All in all it was a fun little project. The responsive framework is Amazium. http://www.amazium.co.uk/

]]>
Responsive Employee or Team Gallery with smooth scroll 2013-12-24T02:06:43-07:00
Pure CSS albums gallery https://codepen.io/webmotion/pen/kdawYy https://codepen.io/webmotion/pen/kdawYy Chris Blackford

See the Code - See it Full Page - See Details

]]>
Pure CSS albums gallery 2013-12-24T02:05:47-07:00
Gallery https://codepen.io/webmotion/pen/ALqMVw https://codepen.io/webmotion/pen/ALqMVw Chris Blackford

See the Code - See it Full Page - See Details

A gallery with CSS transitions.

]]>
Gallery 2013-12-24T02:04:23-07:00
3D Gallery on CSS3 (autoplay) https://codepen.io/webmotion/pen/nxMmGe https://codepen.io/webmotion/pen/nxMmGe Chris Blackford

See the Code - See it Full Page - See Details

3D Gallery on CSS3 from http://cssdeck.com/labs/jntzea5v

]]>
3D Gallery on CSS3 (autoplay) 2013-12-24T02:01:50-07:00