try1

by 94jerdaw

HTML

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

CSS

.card {
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:5px;
	margin-right:5px;
}

.container {
    width:430px;
}

.card:hover{
    width:94px;
    height:94px;
	border:3px solid black;
}

JavaScript

var colors = [
    "orange","orange","pink","pink","red","red","purple","purple",
    "blue","blue","green","green","brown","brown","yellow","yellow"
];

for(var j, x, i = kort.length; i; j = parseInt(Math.random() * i),
	x = kort[--i], kort[i] = kort[j], kort[j] = x);
	
	document.write("blandat: " + kort + "<br>");

var divs = document.getElementsByClassName("card");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * colors.length);
    divs[0].style.backgroundColor = colors[i];
    colors.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

$("div").click(function(){
    $(this).toggleClass("card");
});