<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>

<div class="wrap">
  <div class="sticker"></div>
  <div class="msg">new!</div>
</div>

body {padding:4em; background:#fcfcfc;}

.wrap {width:200px; margin:auto;  z-index:1;}

.msg {
  color: whitesmoke;
  text-align:center;
  font-family: 'Bree Serif', Courier, monospaced;
  font-size:3.5em;
  width:200px;
  position:absolute;
  margin:55px 0 0 2px;
  pointer-events: none; 
}

.sticker {
  width:200px;
  height:200px;
  position:absolute;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png) top center no-repeat; 
  animation: spin 10s linear infinite;
  /*Set our animation play state to paused initially */
  animation-play-state: paused; 
}

.sticker:hover {
  /* Toggle our animation play state to running when we are hovering over our sticker */
  animation-play-state: running;
}


@keyframes spin {
  100% {transform: rotate(1turn); }
}