Hand Contact Button

Hand moves up on button hover

by Glynne Turner

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<section class="container-fluid">
  <div class="row">
    <div class="col-md-6 left v-center">
      <div class="content  text-center">
        left
      </div>
    </div>
    <div class="col-md-6 right">
    right
    </div>  
  </div>
</section>

<section class="container padded">
  <div class="row">
    <div class="col-md-6">
     <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Pellentesque massa placerat duis ultricies lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Arcu dictum varius duis at consectetur lorem donec massa. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Tristique magna sit amet purus gravida quis. Id diam maecenas ultricies mi eget mauris. Ac auctor augue mauris augue neque gravida. Et egestas quis ipsum suspendisse ultrices gravida dictum. Viverra vitae congue eu consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Neque ornare aenean euismod elementum nisi. Mauris rhoncus aenean vel elit scelerisque mauris.
</p>
    </div>  
    <div class="col-md-6">
    <p>

Nibh nisl condimentum id venenatis. Amet cursus sit amet dictum sit amet justo donec enim. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Purus viverra accumsan in nisl. Venenatis a condimentum vitae sapien. Adipiscing vitae proin sagittis nisl rhoncus. Nulla facilisi morbi tempus iaculis urna id. Hac habitasse platea dictumst quisque. Potenti nullam ac tortor vitae purus faucibus. Fusce ut placerat orci nulla pellentesque...

CSS

*{padding:0; margin:0; box-sizing: border-box;} 
.padded{padding:50px 0 }
section{overflow:hidden}
a,a:hover{text-decoration:none}
.left,.right{height:100vh;}
.left{background:red}
.right{background:green;box-shadow: -10px 1px 24px -1px rgba(0,0,0,0.75); -webkit-box-shadow: -10px 1px 24px -1px rgba(0,0,0,0.75); -moz-box-shadow: -10px 1px 24px -1px rgba(0,0,0,0.75);}
.v-center{  display: flex; align-items: center;}
.content{width:100%;display:block}
.text-center{text-align:center}
/* FOOTER */

*{padding:0; margin:0}
p{padding:10px 0}
#finger img{height:300px; width:140px; position:absolute; bottom:-200px;left: calc(50% - 20px); transition: bottom 0.5s}
#footer{position:relative; bottom:0; width:100%; height:300px;  overflow-y:hidden; text-align:center}
.finger-up{bottom:0}
.contact-button{position:relative;top:83px; margin:auto; text-decoration:none; color:green; background:#ffffff; border:1px solid green; padding:20px 50px; transition: all 1.5s}
.contact-button:hover{background:green; color:#ffffff}

JavaScript

$('.contact-button').hover(function() {
  if ($('#finger img').hasClass('finger-up')) {
    $('#finger img').removeClass('finger-up');
    $('#finger img').animate({
      'bottom': '-200px'
    }, 300)
  } else {

    $('#finger img').addClass('finger-up');
    $('#finger img').animate({
      bottom: '-100px'
    }, 300)
  }
})
$('.contact-button').click(function(event) {
  event.preventDefault();
})