A Pen by Andrew Kirchmyer.

index.html

<div class="rises"> </div>
<div class="fades"> <div class="label">Hover me!</div> </div>
<div class="other"> </div>

style.css

div {
    position: absolute;
}
.other {
    background-color: brown;
    top:250px;
    height: 450px;
    width: 200px;
    transition: all 2s ease;
}
.rises {
    background-color: blue;
    left: 10px;
    top: 10px;
    z-index: 0;
    transition: all 5s linear;
    opacity: .25;
    height: 100px;
    width: 300px;
}
.fades {
    top: 0;
    left: 0;
    background-color:yellow;
    opacity: .5;
    z-index: 1;   
     height: 200px;
    width: 200px;
}
.rises:hover
{
  opacity: 1;
  z-index: 2;
}
.label {
    top: 15px;
    left: 210px;
    width: 30px;
}
.other:hover {
    -webkit-transform: rotate(30deg);
    left: 200px;
}

transitions-and-transforms.markdown

transitions and transforms

A Pen by Andrew Kirchmyer on CodePen.

License.