A demo of hover effect in a div element

jQuery, CSS and HTML

<!DOCTYPE html>
<html>
<head>
<style>
.hoverdemo {
  background: #804040;
  max-width:200px;
  height:200px;
  padding:20px;
  font-size:17px;
  color:#fff;   
}
</style>
</head>

<body>


    <div class="hoverdemo">A demo of hover effect using jQuery...A demo of hover effect using jQuery...A demo of hover effect using jQuery...</div>
    <div class="overlay" style="display: none;" >Overlay in div element!</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="js/hovereffect.js"></script>
  <script>
    $(function() {
      $(".hoverdemo").hovereffect({
        background_color: "#4B2525",
        font_color: "#fff",
        duration: 800,
        opacity: 0.9,
        slidePath: ['bottom', 'topLeft'],
        overlayWidth: "180px",
        overlayHeight: "180px"
      });
    });
  </script>
</body>
</html>

A demo of hover effect using jQuery...A demo of hover effect using jQuery...A demo of hover effect using jQuery...