Y U NO ?

dabblet.css

/* Y U NO ? */

body { background: #13579B; }

.outer1 { width: 100px; height: 100px; margin: 100px auto; }
.inner1 { width: 100%; height: 100%; text-align: center; background: #FEDCBA; transition: all 1s ease; }
.outer1:hover { position: absolute; top: 0; left: 0; }

.outer2 { width: 100px; height: 100px; position: relative; margin: 100px auto; }
.outer2:hover { position: static; }
.inner2 { text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #FEDCBA; transition: all 1s ease; }

dabblet.html

<div class="outer1">
  <div class="inner1">
    Hover me
  </div>
</div>

<div class="outer2">
  <div class="inner2">
    Hover me
  </div>
</div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}