<script src="http://code.jquery.com/jquery/1.11.2/jquery.min.js"></script>
<script>
 $("#wrapper").mouseenter(function() {
  alert("mouse over!");
  $(".ex7").css("-webkit-transform","translateY(40px)");
  $(".ex7").css("-moz-transform","translateY(40px)");
  $(".ex7").css("-o-transform","translateY(40px)");
  $(".ex7").css("-ms-transform","translateY(40px)");
  $(".ex7").css("-moz-transition","all 0.5s ease-in-out");
  $(".ex7").css("-webkit-transition","all 0.5s ease-in-out");
  $(".ex7").css("-o-transition","all 0.5s ease-in-out");
  $(".ex7").css("-ms-transition","all 0.5s ease-in-out");
  $(".ex50").css("opacity", "100");
  $(".ex50").css("-webkit-transform", "translateY(-40px)");
  $(".ex50").css("-moz-transform", "translateY(-40px)");
  $(".ex50").css("-o-transform", "translateY(-40px)");
  $(".ex50").css("-ms-transform", "translateY(-40px)"); 
  $(".ex50").css("-moz-transition","all 0.5s ease-in-out");
  $(".ex50").css("-webkit-transition","all 0.5s ease-in-out");
  $(".ex50").css("-o-transition","all 0.5s ease-in-out");
  $(".ex50").css("-ms-transition","all 0.5s ease-in-out");       
 )};
</script>
<style>
#wrapper {margin:0px auto;}
.ex7 {
 font-family:Arial, Helvetica, sans-serif;
 font-weight:bolder;
 }
.ex50 {
 opacity:0;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:lighter;
 } 
</style>

<div id="wrapper" style="width:800px; height:800px; background-color:#CCC">
    <div class="ex7">
            <span style="font-size:36px">text</span>
    </div>    
    
    
    <div class="ex50">
            <span style="font-size:12px">texttexttexttexttexttexttexttext</span>
    </div>    
</div>