Skip to content

Instantly share code, notes, and snippets.

@lsjroberts

lsjroberts/hover-diamonds.htm

Created October 23, 2013 19:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsjroberts/7125151 to your computer and use it in GitHub Desktop.
Save lsjroberts/7125151 to your computer and use it in GitHub Desktop.
Download ZIP
gelatindesign.co.uk redesign ideas
Raw
hover-diamonds.htm
<!DOCTYPE html>
<html>
<head>
<style>
.diamonds {
padding: 100px;
}
.diamond {
float: left;
position: relative;
margin: 0 -14px 42px;
width: 100px;
height: 100px;
/*background: #f9f9f9;*/
-webkit-transform: rotate(45deg);
transition: background-color .3s linear;
}
.diamond:nth-child(2n) {
top: 71px;
}
.diamond:hover {
background: #c03435;
}
.diamond:nth-child(2n):hover {
background: #e08226;
}
</style>
</head>
<body>
<div class="diamonds">
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment