A Pen by Eric Tjossem.

A-Pen-by-Eric-Tjossem.markdown

A Pen by Eric Tjossem

A Pen by Eric Tjossem on CodePen.

License.

index.html

<div class="hover-swap">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" class="top"/>
  <img src="http://myhswm.org/images/sized/images/animals/tuxedo_kittens-256x256.jpg" class="bottom"/>
</div>

style.scss

@import "compass";
.hover-swap {
  position: relative;
  height: 256px;
  width: 256px;
}

.hover-swap .top {
  opacity: 1;
  z-index: 2;
}

.hover-swap .bottom {
  opacity: 1;
  z-index: 1;
}

.hover-swap:hover .top {
  opacity: 0;
}

.hover-swap .bottom, .hover-swap .top {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}