Cool Card Animation on Mouse Move

Create a Cool card animation on mouse hover with minimal HTML + CSS + jQuery to highlight your Services, Team member cards.

Easy to implement code

HTML :


<div class="card" style="width: 20rem;">

   <img src="images/male-profile.jpg" class="card-img-top" alt="">

   <div class="card-body">

       <h5 class="card-title">James Leane</h5>

       <p class="card-text">Founder @WiseWeb</p>

   </div>

</div>



<div class="card" style="width: 20rem;">

   <img src="images/female-profile.jpg" class="card-img-top" alt="">

    <div class="card-body">

        <h5 class="card-title">Sarah Lewis</h5>

        <p class="card-text">Operations Coordinator</p>

   </div>

</div>

CSS :


.card {

      background-color: rgba(255,255,255,0.2);

      backdrop-filter: blur(8px);

      border-color: #fafafa;  

}

.card-img-top {

      width:100%;

      height: 280px;

      object-fit:cover;

}

.card-body {

      padding: 20px;

}

.card-title {

     margin-bottom: 3px;

}

.card-text {

      font-size: 14px;

      color: #6d737d;

}

JQUERY :


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://unpkg.com/tilt.js@1.1.19/dest/tilt.jquery.js"></script>




<script type="text/javascript">

  (function($) {



    "use strict";



    $(".card").tilt({

       maxTilt: 15,

       perspective: 1400,

      easing: "cubic-bezier(.03,.98,.52,.99)",

       speed: 1200,

       glare: true,

       maxGlare: 0.15

     });  

}(jQuery));

</script>