JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

   <div class="effect">
                    <div class="multiple">
                        <div class="hoveralls_text">
                            <h2>10% off Infiniti Recommended Service</h2>
                            <p>Helps meet minimum warranty requirements, optimize performance and reliability</p>
                            <p class="fine_print">*Offer cannot be combined with any other discounts or coupons. Offer only valid at Infinity of South Atlanta. Offer expires March 31, 2013. Restrictions may apply. See store for details.</p>
                        </div>
                    </div>
                </div>

CSS

.hoveralls_text{
    top:150px;
    height:150px;
    width:150px;
    position:absolute;
  background-color:#666;    
}


.effect{
    
    height:150px;
    width:150px;
    position:relative;
    display:block;
    background-color:#333;
    overflow:hidden;
}

JavaScript

$('.effect').mouseover(function(){

 $('.hoveralls_text').animate({

    top: '0'
  }, 1000, function() {
   console.log('test');
  });

 	
 });



 $('.effect').mouseout(function(){

 $('.hoveralls_text').animate({

    top: '150px'
  }, 1000, function() {
   console.log('test');
  });

 	
 })