CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
overflow: hidden;
background: #000000}
a {color: #bda3c1; text-decoration:none }
.wrap {
font-family: "Marck Script";
width: 750px;
margin: 0 auto;
padding: 100px 0 100px;
overflow: hidden; }
h1 {
margin-bottom: 200px;
font-size: 4.3em; }
.diamond {
display: block;
float: left;
color: #fff;
font-family: "Kelly Slab";
font-size: 2em;
text-decoration: none;
background: #5c3e52;
margin-left: 72px;
margin-top: -53px;
width: 178px;
height: 178px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg); }
.thumb {
background: url(http://www.rudebox.org.ua/demo/diagonal-thumbnails-gallery/images/sprite.jpg);
position: relative;
overflow: hidden; }
.thumb:after {
content: "";
position: absolute;
top: -36px;
left: -36px;
width: 250px;
height: 250px;
background: inherit;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1; }
.break {
clear: left;
margin-left: 36px; }
.intend {
clear: left;
margin-left: 161px; }
p {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
.diamond p {
position: relative;
line-height: 250px;
z-index: 1;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg) translate(-89px, 0);
-moz-transform: rotate(-45deg) translate(-89px, 0);
transform: rotate(-45deg) translate(-89px, 0);
}
.thumb p {
visibility: hidden; }
#coffee {
background-position: 0 0; }
#library {
background-position: -250px 0; }
#dream {
background-position: -500px 0; }
#roses {
background-position: -750px 0; }
#cake {
background-position: -1000px 0; }
#wine {
background-position: -1250px 0; }
.thumb:hover {
background: #a5b8a6; }
.thumb.dark:hover {
background: #bda3c1; }
.thumb:hover:after {
box-shadow: inset 0 0 100px #5c705d; }
.thumb.dark:hover:after {
box-shadow: inset 0 0 100px #5c3e52; }
.diamond:hover p {
visibility: visible; }
footer {
font-size: 12px; }
.no-csstransforms h1 {
margin-bottom: 147px; }
.no-csstransforms .diamond {
margin-left: 0;
margin-top: 0; }
.no-csstransforms .intend {
margin-left: 197px; }
.no-csstransforms .break {
margin-left: 108px; }
.no-csstransforms .diamond p {
line-height: 178px; }
