A Pen by Secret Sam.

An-Anonymous-Pen.markdown

An Anonymous Pen

Trying to figure out how to add images to this widget.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div class="link-amazon">
<a href="http://www.amazon.com" target="_blank" style="border:none;"></a>
</div>


<div class="link-instagram">
<a href="http://instagram.com/" target="_blank" style="border:none;"></a>
</div>



<div class="link-twitter">
<a href="https://twitter.com/" target="_blank" style="border:none;"></a>
</div>

style.css

.link-amazon a {
  display:block;
  width:258px;
  height:140px;
  top:115px;
  right:200px;
  background:transparent url(http://2.bp.blogspot.com/-fAuHMOoEU90/UqfFbzH_i3I/AAAAAAAADAI/kUe0G6YkOWc/s1600/amazon_zpse8ff2fec.png) no-repeat;
  position:absolute;
}

.link-amazon a:hover {
  background-position:0 -140px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-transition:all .6s linear 0;
  -moz-transition:all .6s linear 0;
  -o-transition:all .6s linear 0;
  -ms-transition:all .6s linear 0;
  transition:all .6s linear 0;
}

.dockzoom link-amazon:hover {
  background-size:258px;
  background-position:bottom;
  -webkit-transition:all 3s ease-in;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -ms-transition:all 3s ease-in;
  transition:all 3s ease-in;
}

.link-instagram a {
  display:block;
  width:249px;
  height:160px;
  top:100px;
  left:565px;
  background:transparent url(http://3.bp.blogspot.com/-8olKneYv5ew/UqfFbsaSjZI/AAAAAAAADAQ/jyHjLnAfeHA/s1600/instagram.png) no-repeat;
  position:absolute;
}

.link-instagram a:hover {
  background-position:0 -160px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-transition:all .6s linear 0;
  -moz-transition:all .6s linear 0;
  -o-transition:all .6s linear 0;
  -ms-transition:all .6s linear 0;
  transition:all .6s linear 0;
}

.dockzoom link-instagram:hover {
  background-size:249px;
  background-position:bottom;
  -webkit-transition:all 3s ease-in;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -ms-transition:all 3s ease-in;
  transition:all 3s ease-in;
}

.link-twitter a {
  display:block;
  width:249px;
  height:160px;
  top:100px;
  left:200px;
  background:transparent url(http://3.bp.blogspot.com/-WCkILoH4b7E/UqfFbx_l_aI/AAAAAAAADAM/D4SCgQLqmHU/s1600/twitter_zps9ef84882.png) no-repeat;
  position:absolute;
}

.link-twitter a:hover {
  background-position:0 -160px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
  -webkit-transition:all .6s linear 0;
  -moz-transition:all .6s linear 0;
  -o-transition:all .6s linear 0;
  -ms-transition:all .6s linear 0;
  transition:all .6s linear 0;
}

.dockzoom link-twitter:hover {
  background-size:249px;
  background-position:bottom;
  -webkit-transition:all 3s ease-in;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -ms-transition:all 3s ease-in;
  transition:all 3s ease-in;
}