memorex testing

by pixeloco

HTML

<br /><br />other things<br /><br /><br /><br /><br /><br /><br /><br />
lkwer<br />
<div class="headphones animate">
    <img src="http://i.imgur.com/F3l992A.png" onmouseover="this.src='http://i.imgur.com/kUxLMoU.png'" onmouseout="this.src='http://i.imgur.com/F3l992A.png'" /></div>

CSS

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
	overflow-x: hidden;
    margin: 30px;
}

.headphones {
    width: 100px; height: 100px;
    background: url(http://40.media.tumblr.com/tumblr_meez03n1zJ1rmvgx6o1_250.png) yellow;
overflow: hidden;
    position: absolute;
}

.headphones img {position: relative; top: -280px;}
.headphones:hover {color: blue;overflow: visible;background-color: blue;}

.animate {
	-webkit-animation: fader 2s linear 1, pulser 2s 2s linear infinite;
	-moz-animation: fader 2s linear 1, pulser 2s 2s linear infinite;
	-o-animation: fader 2s linear 1, pulser 2s 2s linear infinite;
	animation: fader 2s linear 1, pulser 2s 2s linear infinite;

}

@-webkit-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes pulser {
  0%, 100%   {-webkit-transform: scale(1); transform: scale(1);}
  50%  {-webkit-transform: scale(.95); transform: scale(.95);}
}
@-moz-keyframes pulser {
  0%, 100%   {-moz-transform: scale(1); transform: scale(1);}
  50%  {-moz-transform: scale(.95; transform: scale(.95);}
}
@-o-keyframes pulser {
  0%, 100%   {-o-transform: scale(1); transform: scale(1);}
  50%  {-o-transform: scale(.95); transform: scale(.95);}
}

@keyframes pulser {
  0%, 100%   {-webkit-transform: scale(1);
   	    -moz-transform: scale(1);
   	    -o-transform: scale(1);
   	    -ms-transform: scale(1);
   	    transform: scale(1); }
  50% {-webkit-transform: scale(.95);
   	    -moz-transform: scale(.95);
   	    -o-transform: scale(.95);
   	    -ms-transform: scale(.95);
   	    transform: scale(.95);}
}