color-palettes:

Marshmallows - Submitted By la-voyage-violet

#f9d6cc #f9bfa3 #fadc9b #fefbf3 #c6faec

6 Color Scheme Tools

COLORlovers
The biggest resource community for colour palettes as well as patterns. Plus points that they spell “colour”correctly my British way.

Kuler
From Adobe it pretty much works the same way as COLORlovers where you also create your own schemes or edit others accordingly.

Colorotate
This site is a little more interactive and fun with the 3D elements. In addition there are few fun mixing/blending options.

Color Scheme Designer
The Wheel! A great resource for creating schemes as well options for “light-er” or “dark-er” versions.

Pictaculous
There are a few picture-to-colours applications but this is my favourite as, in my opinion, its most accurate. In addition to finding you colours from an image you’ve uploaded, it suggests other similar colour schemes from Colourlovers and Kuler. You can also download swatch files which I find useful.

Color Palette Generator (DeGraeve.com)
If you’re lazy or don’t have the image on your computer, this site lets you use URL’s instead.

Hovering Slideshow Base. (optimized for Chrome)

This isn’t really a tutorial since I’m not really explaining, but I think giving out a base will be easier than explaining each line.

The main trick is having a div inside an other. The interior one having a superior width, the exterior one being only like a frame.  

Since the images are set as background, you can easily add buttons or text or whatever in your pannels.

CSS :

#slideshow
 {height:300px;
 width:600px;
 overflow-y:hidden; /*no vertical scroll*/}
 
#content
 {width:1200px; /*the more you'll have pannels the more you'll raise its value*/}

#title
{position:absolute;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

#content:hover #title
{opacity:0;}

.pannel
{width:150px;
height:300px;
float:left;
overflow:hidden;
background-position:-150px; /*value is (-)width*/
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

.pannel:hover
{width:500px; /*width of your pannel Backgorund image*/
background-position:0px;}

HTML :

<div id='slideshow'>
<div id='content'>
<div id='title'>choose your path</div>
<div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/hALm9835c/500300.png');'>
</div><!--pannel 1-->
<div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/Eb4m9836t/500301.png');'>
</div><!--pannel 2-->
<div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/U0nm9838s/500302.png');'>
</div><!--pannel 3-->
<div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/Vjam983ba/500303.png');'>
</div><!--pannel 4-->
<div class='pannel' style="background-image:url('http://static.tumblr.com/s2ymoja/Zhmm983cm/500304.png');">
</div><!--pannel 5-->
</div><!--content-->
</div><!--slideshow-->

Light and dark backgrounds from subtlepatterns. Please credit them if using!

evaeon:

Minimalist Backgrounds. Click on an image you like and save the image from there.
DISCLAIMER: I do not own; credit goes to rightful owners.