Edit in JSFiddle

JavaScript
HTML
CSS
Result

var $sun = $('#sun');
var $txt = $('#text');
var intvl;
var c = 0;

$sun.hover(function(e){
  
    clearInterval(intvl);
    intvl = setInterval(function() {
        if (c != -360) {
            c += 1;
            $txt.css({
                MozTransform: 'rotate(-'+c+'deg)',
                WebkitTransform: 'rotate(-'+c+'deg)',
                transform: 'rotate(-'+c+'deg)'
            });
        }
    }, 20);
  $txt.stop().animate({backgroundSize:'100%', opacity:'1'},700);
}, function(){
    clearInterval(intvl);
    $txt.stop().animate({backgroundSize:'60%', opacity:'0.1'},400);
});

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>roXon</title>
  
<style>
  #logo{
    position:relative;
    top:50px;
    width:200px;
    height:200px;
  }
  #text{
    position:absolute;
    width:200px;
    height:200px;
    background:url(http://img338.imageshack.us/img338/4143/textzo.png) center center no-repeat;
    background-size:60%;
    opacity:0.1;
  }
  #sun{
    position:absolute;
    top:40px;
    left:39px;
    width:122px;
    height:122px;
    background:url(http://img822.imageshack.us/img822/346/sunfn.png)center center no-repeat;
    
  }
  
</style>
</head>
<body>
  <div id="t"></div>
  
  <div id="logo">
    <div id="text"></div>
    <div id="sun"></div>
  </div>
  
  
</body>
</html>

#logo{
    position:relative;
    top:50px;
    width:200px;
    height:200px;
  }
  #text{
    position:absolute;
    width:200px;
    height:200px;
    background:url(http://img338.imageshack.us/img338/4143/textzo.png) center center no-repeat;
    background-size:60%;
    opacity:0.1;
  }
  #sun{
    position:absolute;
    top:40px;
    left:39px;
    width:122px;
    height:122px;
    background:url(http://img822.imageshack.us/img822/346/sunfn.png)center center no-repeat;
    
  }