armidia
6/22/2019 - 11:58 PM

146.html

146.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Text Rollover Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <link href="style.css" rel="stylesheet" type="text/css">
      <script>
         var topWhenHover = 220;
         var topWhenLeave = 265;

         $(function(){

            $('.rolloverContainer').mouseenter(function(){
               $('.content',this).animate({top:topWhenHover + 'px'})
            });

            $('.rolloverContainer').mouseleave(function(){
               $('.content',this).animate({top:topWhenLeave + 'px'})
            });

         })
      </script>     
   </head>
   <body>
      <div class="rolloverContainer">
         <img src="lion.jpg" />
         <div class="content">
            <span class="title">The Lion</span>
            <span class="description">Often referred to as the 'King of the Jungle' because of its raw power and strength.</span>
         </div>
      </div>     
   </body>
</html>