Hovers

by mrjordy

HTML

Hovers:

<div class = "threedeecube">
<div class = "hov cube cubeUpLeft">cube</div>
<div class = "hov cube cubeUpRight">cube</div>
<div class = "hov cube cubeDownLeft">cube</div>
<div class = "hov cube cubeDownRight">cube</div>
</div>

CSS

body {font-family: kalinga; line-height: 40px;}
.hov {
  cursor: pointer;
}
.threedeecube {
  position: relative;
  height: 50px;
}
.cube {
  height: 40px;
  border: 1px solid #111;
  transition: .2s;
  text-align: center;
  width: 100px;
  border-radius: 3px;
  background: white;
  display: inline-block;
  top: 2px;
}
.cubeUpLeft:hover {
    box-shadow:
        1px 1px #111,
        2px 2px #111,
        3px 3px #111;
    margin-top: -3px;
    margin-left: -3px;
    margin-right: 3px;
    margin-bottom: 3px;
}
.cubeUpRight:hover {
    box-shadow:
        -1px 1px #111,
        -2px 2px #111,
        -3px 3px #111;
    margin-top: -3px;
    margin-right: -3px;
    margin-left: 3px;
    margin-bottom: 3px;
}
.cubeDownLeft:hover {
    box-shadow:
        1px -1px #111,
        2px -2px #111,
        3px -3px #111;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-top: 3px;
    margin-right: 3px;
}
.cubeDownRight:hover {
    box-shadow:
        -1px -1px #111,
        -2px -2px #111,
        -3px -3px #111;
    margin-bottom: -3px;
    margin-right: -3px;
    margin-left: 3px;
    margin-top: 3px;
}