KenBurns Animation & Sheer Style Html Slideshow

This slideshow has a soft, friendly almost romantic feel. It uses purple and white, and the use of semi-transparency reinforces the soft, dreamy look. This slider design would be great for dating websites, travel companies that specialize in romantic get-aways, and romance or chick-lit authors.

This example uses the 'kenburns' change effect to switch from one image to the next. This is a very gentle move-and-fade transition, that works well with the dreamy feel whilst also creating a sense of movement.

The caption in the bottom left corner uses purple text. There is a main title, against a very slightly transparent white rectangle with rounded corners and sub-title, which is against a semi-transparent white rectangle with a more opaque white border. The use of transparency throughout this design allows the colors of the photographs to come through in a soft, diffuse way.

The font used is Raleway, an elegant sans-serif typeface that works well with the color scheme.

The captions appear by seeming to swell into place from a single dot. The title appears first, followed by the sub-title.

Hovering over causes two navigation arrows to appear. These shrink into view. They have quite a unique design, being a transparent arrow-head with a semi-transparent white border against a transparent circle with a semi-transparent white border. Hovering over the arrow turns the circle purple and makes the arrow-head opaque.

Clicking on the navigational arrows allows you to cycle through the images in the slideshow.

Moving off the slider causes the arrows to expand in size and fade away. Again, this transition is lovely and smooth, and really reinforces the soft and romantic feel due to the fact it is reminiscent of rain drops falling into water.

There are small bottom semi-transparent white circles. They represent images within the slideshow, and the user can click on them to navigate to different images without having to wait for the whole sequence.

The circle that represents the current image in the slideshow turns transparent and gains a white border.

This carousel is CSS-only, so all the transition effects, icons and navigation is achieved without JQuery or Javascript. Also it is completely responsive, and on a small screen such as a smart phone the user interface simplifies - for example, the captions do not appear, and the navigation arrows are larger and easier to click on. On a mid-sized screen, such as a tablet, the slider becomes full-width.

Overall, this is a lovely slider design that is lightweight, responsive and perfect for website creator with a feminine look and feel.