Follow

Welcome to TechYari!

Tutorials on webdesign, web development and more...

Creating an awesome animated hover popup using jQuery and CSS3



By  Vipin Dubey     6/25/2014    Labels:,, 

Introduction

Today I am going to create three simple yet beautiful animated hover popup using jQuery, HTML and CSS.
I will be using below functions/events provided by jQuery to achieve this effect

1. mouseenter() - to show the popup when user enters mouse over the link/button.
2. mouseleave() - to hide the popup when user leaves the button.
3. fadeToggle() - to add animation to the popup window, you can use other functions to create different effects according to your needs.

Demo

In order to create this I have used twitter bootstrap with jQuery. There are many different ways to style a hover popup, one is using images but I have styled this popup using css3 and it may not work in older browsers ( IE 9 and earlier ). I have tested this using chrome, you can tweak it to work on other browsers as well.

HTML Code



<div class="container">
      <div class="post-title">
     <h2><a href="#">Creating an animated hover popup using jQuery and CSS3</a></h2>
      </div>

      <div class="row hover-demo">
        <div class="col-md-4">
          <div class="outer-wrapper">
            <div class="on-hover-content">
            <img src="img/mustang.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada turpis metus, vitae fermentum mauris imperdiet ut. Suspendisse aliquam</p>
            </div>
            <a type="button" class="btn btn-primary">An Image with text</a>
           </div>
        </div>
        <div class="col-md-4">
           <div class="outer-wrapper">
            <div class="on-hover-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada turpis metus, vitae fermentum mauris imperdiet ut. Suspendisse aliquam</p>
            </div>
            <a type="button" class="btn btn-success">A paragraph</a>
        </div>
        </div>
        <div class="col-md-4">
           <div class="outer-wrapper">
            <div class="on-hover-content">
              <img src="img/mustang.jpg">
            </div>
          <a type="button" class="btn btn-info">Image only</a>
        </div>
        </div>
      </div>
   </div>

CSS Code


.hover-demo{margin-top: 220px;}
.hover-demo{text-align: center;}
.on-hover-content{position: absolute;bottom: 40px;background-color: whitesmoke;padding: 10px;border-radius: 10px;}
.on-hover-content img{width:360px;}
#dynamic-content{width: 360px;overflow: scroll;}

In this HTML code I have created 3 links and  styled them as buttons using bootstarps classes. All of them have on div element as a sibling which contains the hover popup content to be shown while someone hovers over the links. We will hide these popup content initially using jQuery's hide() method and the we will use mouseenter() and mouseleave() to show and hide hover popup content.

Below is the jQuery code to achieve the result.



 <script type="text/javascript">
      $(document).ready(function(){
          $("div.on-hover-content").hide();
      });

      $(".btn").mouseenter(function(){
        $(this).siblings("div.on-hover-content").fadeToggle( "slow", "linear" );
      })
      .mouseleave(function(){
         
        $(this).siblings("div.on-hover-content").fadeToggle( "slow", "linear" );
      });

    </script>
That's all we have created a nice hover popup in no time with few lines of code using jQuery.

Kindly share this tutorial if you like it :). Leave comments below for suggestions and doubts. 

About Vipin Dubey

A web developer, blogger, amateur designer and an open source enthusiast.

No comments:

Post a Comment


Contact Form

Name

Email *

Message *

Labels

Follow TechYari on

Translate

About TechYari

Tech Yari is a Technical Blog featuring articles on Web Development, Web Design, Search Engine Optimization, Social Media Marketting and Programming.