ghost666,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
box-sizing: border-box;
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
margin: 70px auto; color : #FFFFFF;
}
#photo{
background-color: #FF00FF; width: 87px;
height: 87px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script>
$(function() {
var tween = TweenLite.to("#photo", 2, {
width: "300px",
height: "300px",
opacity: 0,
x: -100,
y: -100,
"font-size" : 45,
paused:true
});
function startTween() {
tween.play()
}
function resetTween() {
tween.reverse()
}
$('#webd').hover(startTween, resetTween);
});
</script>
</head>
<body>
<div class="hot" id="webd"><div id="photo">hover</div></div>
</body>
</html>