How to make images responsive?

<style type="text/css">

 /*makes an image responsive*/
.responsive-image{
         
  display: block;
  height: auto;
  max-width:100%;
  width:100%;

}

</style>

<img class ='responsive-image' src =' http://www.google.com/images/srpr/logo11w.png'>

<!-- Now resize the browser to check whether its working or not -->


Output :)

CSS : Multiline header background hover

<style type="text/css">

.container {
    width: 50px;
}

h1 > span {
    display: inline-block;
    position: relative;
}

h1 > span:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: crimson;
    z-index: -1;
    -webkit-transition: height 0.25s;
    -moz-transition: height 0.25s;
    -ms-transition: height 0.25s;
    -o-transition: height 0.25s;
    transition: height 0.25s;
}

h1:hover > span:before {
    height: 100%;
}

</style>

<div class="container">
    <h1>
        <span>Hello</span> <span>World</span>
    </h1>
</div>


Output :)

1)

2)

How to give different href on single image ?

<style type="text/css">

.imgwrap {
   position:Relative;
}
.imgwrap a {
   position: absolute;
   text-indent: -9999px;
   border: 1px solid red;
   display: block;
   width: 134px;
   height: 70px;
   top: 143px;
   left: 395px;
}

</style>

<div class="imgwrap">

<a href="google.com"></a>

    <img src="image.png" />

</div>


Output :)

Animating a box with CSS3

<style type="text/css">

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; background:#0CF;} /* just to be sure these are full screen*/

.container { width:100%; height:100%; overflow:hidden; position:absolute; display:block; }

.ground {
width:100%;
height:50px;
background:url(http://corkeynet.com/test/images/ground_pattern_small.jpg) repeat-x;
position:absolute;
bottom:0px;
}

.cloud{ position:absolute; display:block; }

#cloud1 {
width:166px;
height:94px;
background:url(http://corkeynet.com/test/images/cloud1.png) no-repeat;
z-index:0;
left:1px;
/* Chrome, Safari, Opera */
    -webkit-animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
    /* Standard syntax */
    animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
}

#cloud2 {
width:146px;
height:93px;
background:url(http://corkeynet.com/test/images/cloud2.png) no-repeat;
z-index:2;
/* Chrome, Safari, Opera */
    -webkit-animation: cloud2 34s linear 1, cloud2_loop 10s 3s linear infinite;
    /* Standard syntax */
    animation: cloud2 3s linear 1, cloud2_loop 10s 3s linear infinite;
}

#cloud3 {
width:113px;
height:68px;
background:url(http://corkeynet.com/test/images/cloud3.png) no-repeat;
z-index:3;
/* Chrome, Safari, Opera */
    -webkit-animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
    /* Standard syntax */
    animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cloud1 {
    0%   {left:20px; top:10px;}
    100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud1_loop {
    0%   {left:-166px; top:10px;}
    100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud2 {
    0%   {left:75%; top:30px;}
    100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud2_loop {
    0%   {left:-146px; top:30px;}
    100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud3 {
    0%   {left:50%; top:50px;}
    100% {left:100%; top:50px;}
}

@-webkit-keyframes cloud3_loop {
    0%   {left:-146px; top:50px;}
    100% {left:100%; top:50px;}
}

/* Standard syntax */
@keyframes cloud1 {
    0%   {left:20px; top:10px;}
    100% {left:100%; top:10px;}
}

@keyframes cloud1_loop {
    0%   {left:-166px; top:10px;}
    100% {left:100%; top:10px;}
}

@keyframes cloud2 {
    0%   {left:75%; top:30px;}
    100% {left:100%; top:30px;}
}

@keyframes cloud2_loop {
    0%   {left:-146px; top:30px;}
    100% {left:100%; top:30px;}
}

@keyframes cloud3 {
    0%   {left:50%; top:50px;}
    100% {left:100%; top:50px;}
}

@keyframes cloud3_loop {
    0%   {left:-146px; top:50px;}
    100% {left:100%; top:50px;}
}

.box {
width:112px;
height:112px;
background:url(http://corkeynet.com/test/images/gift_box_small.png) no-repeat;
margin:auto;
z-index:4;
position: absolute;
left: 0;
top: auto;
bottom: 25px;
right: 0;
/* Chrome, Safari, Opera */
    -webkit-animation: box_fall 8s linear 1;
    /* Standard syntax */
    animation: box_fall 8s linear 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes box_fall {
    0%   {bottom: 100%;}
    100% {bottom: 25px;}
}
/* Standard syntax */
@keyframes box_fall {
    0%   {bottom: 100%;}
    100% {bottom: 25px;}
}

</style>

<body>

<div class="container">
<div class="ground"></div>
<div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
    <div id="cloud3" class="cloud"></div>
    <div class="box"></div>
</div>

</body>


Output :)

1)

2)

3)

Return of a transition in CSS

<!DOCTYPE html>

<style type="text/css">

html, body {
height: 100%;
}

body {
margin-top: 100px;
margin-bottom: 100px;
}

.wrap {
width: 85%;
margin: auto;
background: #F0FCFF;
box-shadow: 0 0 20px rgba(0,0,0,.5);
height: 400px;
padding: 30px;
}
.box {
height: 100px;
width: 100px;
background: blue;
position: absolute;
-webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s;
}
.box2 {
height: 100px;
width: 83%;
padding: 10px;
position: absolute;
-webkit-box-sizing: border-box;
opacity: 0;
-webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s;
}
.box2 span {
font-size: .90em;
margin-right: 10%;
float: left;
font-family: 'Georgia', sans-serif;
}

.wrap:hover .box {
border-radius: 50%;
margin-left: 73%;
background: coral;
}

.wrap:hover .box2 {
opacity: 1;
-webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}

</style>
<body>

<div class="wrap">
<div class="box2">
<span>Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc ddddddddddddddddddddddd eeeeeeeeeeeeeeeeee fffffffffffffffffff gggggggggggggggggg hhhhhhhhhhhhhhh iiiiiiiiiiii</span>
</div>
<div class="box"></div>
</div>

</body>

</html>

Output :)

1)

2)

Expand Retract effect using JavaScript and CSS

HTML File :)


<!DOCTYPE html>
<html>
<head>
<title>MaHii : CSS with JS</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script type="text/javascript" src="animate.js"></script>
</head>
<body>
<div id="container">

    <div class="buttons">
        <h1><a href="#" onClick="return false" onMouseDown="expand('first')">Expand Box</a></h1>
            <h1><a href="#" onClick="return false" onMouseDown="retract('first')">Retract Box</a></h1>
        </div>

        <div class="box" id="first">
<p>JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.</p>
        </div>

    </div>
</body>
</html>


CSS File :) style.css :)


#container{
width:350px;
padding:5px;
}

h1{
font-family: montserrat;
font-size:16px;
width:150px;
background:#33b5e5;
padding:6px;
border-radius:3px;
float:left;
margin:5px;
text-align:center;
}

h1 a{
text-decoration:none;
color: white;
}

h1 a:hover{
color: #e1e2e3;
}

.box{
background:#33b5e5;
width:342px;
height:0px;
overflow:hidden;
border-radius:5px;
color: white;
font-family: montserrat;
font-size:13px;
}

.box p{
padding:10px;
}


JavaScript File :) animate.js :)


function expand(el){

var target = document.getElementById(el);
var height = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+el+'\')',10);

if(height < sh){
height += 5;
} else {
clearTimeout(loopTimer);
}

target.style.height = height+"px";
}

function retract(el){

var target = document.getElementById(el);
var height = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+el+'\')',10);

if(height > 0){
height -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}

target.style.height = height+"px";
}


Output :)

1)

2)

3)

Sticking a div to mouse cursor

<html>
<head>
<title>MaHiii : CSS Tution</title>
<style type="text/css">

div#myDiv1 {
   position:absolute;
   left:0;
   top:0;
}

</style>
</head>

<body>

<div id="myDiv1">MaHiiiiiii</div>

<script type="text/javascript">

var mydiv1=document.getElementById("myDiv1");

document.addEventListener('mousemove', function (e) {
   var x = e.pageX;
   var y = e.pageY;
   mydiv1.style.top = y + 'px';
   mydiv1.style.left = x + 'px';
});

</script>
</body>
</html>

Output :)

Nice looking linear gradient background

<html>
<head>
<title>MaHiiii : CSS :  Linear Gradient Background</title>

<style type="text/css">

html
{
    height: 100%;
    background-color: #f095ee;

    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                        to(transparent));

    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);

    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);

    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);  

    -webkit-background-size: 400px 400px;
    -moz-background-size: 400px 400px;
    background-size: 400px 400px;
}
</style>
</head>
<body>

</body>
</html>


Output :)

Simple ToolTip ...!

<style type="text/css">

.tooltip {
   position: relative;
   opacity: 0;
   padding: 10px;
   background: #9B59B6;
   color: white;
   font-family: comic sans ms;
   border-radius: 5px;
   -webkit-transition:all 0.2s ease-in;
   -moz-transition:all 0.2s ease-in;
   transition:all 0.2s ease-in;
}

a{
color: #bfd04d;
font-family: 'montserrat';
padding: 10px;
text-decoration: none;
}

a.show:hover + span.tooltip {
   opacity:1;
}

</style>

<div class="wrapper">
 
    <a href="#" class="show">Hover Me !</a>
    <span class="tooltip">Hello ! This is tooltip....</span>

    <br />
 
    <a href="#" class="show">Hover Me !</a>
    <span class="tooltip">Hello ! This is another tooltip....</span>

</div>

Output :)

1)

2)

Odd Even style in CSS

<style type="text/css">

    .timeline-centered .timeline-entry:nth-of-type(odd) .timeline-entry-inner .timeline-name {
        background-color: #fad839;
    }

    .timeline-centered .timeline-entry:nth-of-type(even) .timeline-entry-inner .timeline-name {
        background-color: #21a9e1;
    }

    .timeline-label{
        height: 10px;
    }

</style>

<div class="timeline-centered" id="ulnotifications">

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

</div>


Output :)

Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Example 1)

<style type="text/css">

.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
}
.module > h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
.module > p {
padding: 0 1rem;
}

.stripe-7 {
color: white;
background: -webkit-repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
background: repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
}

</style>

<div class="module">

<h2 class="stripe-7">Radial</h2>

<p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>


</div>

Output :)

Example 2)

<style type="text/css">

div {
height: 50px;
margin-bottom: 10px;
}

.progress {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background-size: 30px 30px;
}
.progress .current {
width: 25%;
-webkit-animation: width 5s infinite;
animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background-size: 30px 30px;
}

.progress-funky {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
background: repeating-linear-gradient(-45deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
}
.progress-funky .current {
width: 25%;
-webkit-animation: width 5s infinite;
     animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
background: repeating-linear-gradient(-45deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
}

@-webkit-keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

@keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

</style>

<div class='progress'>
<div class='current'></div>
</div>

<div class='progress-funky'>
<div class='current'></div>

</div>

Output :)

Source :- http://css-tricks.com/stripes-css/

How to prevent toggle effect when an inside anchor is clicked?

First attach a jQuery file in the example.

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">

    .booklist article{
       display:none;
    }

</style>

    <section>
       <ul class="booklist">
         <li>
             <a>Article Name 1</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtAz6X0FdacvaW5MhAXC-tShe0ioIkMv9wfHA4MGJ9LfEFSNZtgs0JVqL3PE0KoZ2O12t2MWLGRJKriDR5RS4UsoOV99K6efvrE6XRJET-rbISfv9JisHDanUJ2qkpwbiMhuEDr0HsgrW/s1600/capture-20141005-161110.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
         <li>
             <a>Article Name 2</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAgNtjIq9GRU9EXHZzi4gLU1wgoHUJ5tCfuXR__-kYT3_sOxmPxySiehWly3U_ZCyTz39KWRAvS7lYvwXMO2nyeL3wkjRIEUA-A-StUb3tDShR8LirYBlIkEw7kvWhopw-HK5qtX5c5uB/s1600/capture-20141004-135246.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
         <li>
             <a>Article Name 3</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhC6M5MK5rFclQ4q8qtlU9XokJUMB6XC1vbMMdy3feALpA6GdnQvlBi3JS3qWczrkUkZc8YDoZ_l1UtUH5E5GcdI_C_c37YJQyse-_cnkG7d7j-TT80DGHuMFMB78j0zNX5xnLoozJtl3O/s1600/capture-20141003-171024.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
       </ul>
    </section>

<script type="text/javascript">

      $(".booklist li a").click(function(){
         $(this).siblings("article").slideToggle().closest("li").siblings("li").find("article").slideUp();
      });

</script>

Output :)

1)

2)

3)

4)

Nice looking scrolling button effect.

<style type="text/css">

#down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
 opacity:0;
border-top: 20px solid #f00;
}

#down1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

#down2 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

@-webkit-keyframes anim{
from{opacity:0;}
to{opacity:1;}
}

#down{
-webkit-animation:anim 3s;
 -webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2{
from{opacity:0;}
to{opacity:1;}
}

#down1{
-webkit-animation:anim2 3s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim3{
from{opacity:0;}
to{opacity:1;}
}

#down2{
-webkit-animation:anim 3s;
-webkit-animation-delay:3s;  
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

</style>

<button>
<div id="down"></div>
<div id="down1"></div>
<div id="down2"></div>
</button>

Output :)

Nice example about how to add lines to the button?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MaHiiii</title>

  <style type="text/css">

a {
font-family: helvetica;
background: #E20025 url(jT5el.png) center no-repeat;
border-radius: 50%;
width: 50px;
display: block;
white-space: nowrap;
padding: 1em 0 1em 0;
text-indent: -3em;
word-spacing: 4em;
text-decoration: none;
margin: 0 auto;
position: relative;
color: #E20025;
box-shadow: 0 0 5px;
}

a:before, a:after {
content: '';
height: 1px;
background: #CCC;
width: 7em;
display: block;
position: absolute;
height: 2px;
top: 1.5em;
}
a:before {
left: -11em;
}
a:after {
right: -11em;
}

@media only screen and (min-width:515px){
a:before,a:after {
width: 9em;
}
a:before {
left: -13em;
}
a:after {
right: -13em;
}
}

@media only screen and (min-width:570px){
a:before,a:after {
width: 10em;
}
a:before {
left: -14em;
}
a:after {
right: -14em;
}
}

@media only screen and (min-width:620px){
a:before,a:after {
width: 12em;
}
a:before {
left: -16em;
}
a:after {
right: -16em;
}
}

@media only screen and (min-width:800px){
a:before,a:after {
width: 17em;
}
a:before {
left: -21em;
}
a:after {
right: -21em;
}
}

  </style>

</head>
<body>
<a href="#">Read More</a>
</body>
</html>

Output :)

CSS Tool-tip

<style type="text/css">

.tooltip{
  display: inline;
   position: relative;
   white-space: pre-wrap;       /* css-3 */
   margin: 20px 20px 20px 20px;
   height: 30px;
   width: 100px
}

.tooltip:hover:after{
   background: #33b5e5;
   border-radius: 5px;
   bottom: 26px;
   color: white;
   content: attr(tip);
   left: 20%;
   padding: 5px 15px;
   position: absolute;
   z-index: 98;
   width:auto;
   min-width:50px;
   max-width:500px;
}

.tooltip:hover:before{
   border: solid;
   border-color: #33b5e5 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 20px;
   content: "";
   left: 50%;
   position: absolute;
   z-index: 99;
}

</style>

<div id="container" style="margin: 220px 135px 0px 0px; height: 400px">

    <a class="tooltip" tip="television">Tip1</a>
    <a class="tooltip" tip="In modern days, TV is behaving like a criminal teacher.">Tip2</a>

</div>

Output :)

Get callback after height animation using jQuery.

First link jQuery file in the example.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<style type="text/css">

#btn1{
   background: #321321;
   color: white;
   border-radius:3px;
   border: 1px solid;
   height: 35px;
}
#box{
   background:#c87bb9;
   height:100px;
   width:100px;
   margin:6px;
}

</style>

<button id="btn1">Start Animate</button>
<div id="box"></div>

<script type="text/javascript">

$(function(){
   $("#btn1").click(function () {
       $("#box").animate({
           height: "300px"
       }).promise().done(function(){
           alert('animation is finished');
       });;
   })
});

</script>


Output :)

1)

2)

How to apply CSS to half of a character?

Note :- Insert jQuery file in the example.

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

html{
font-family:'Montserrat';
}

.myStyle {
    position:relative;
    display:inline-block;
    font-size:80px;
font-weight: bold;
    color: transparent;
    overflow:hidden;
    white-space: pre;
}

.myStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #8e44ad;
}
.myStyle:after {
    display:block;
    direction: rtl;
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #1abc9c;
}

</style>

<p><h2>By MaHiii</h2></p>

<span class="whatever">CSS Tution</span>

<script type="text/javascript">

$(function(){

jQuery(function($) {
var text, chars, $mahi, i, output;
$('.whatever').each(function(idx, mahi) {
$mahi = $(mahi);
text = $mahi.text();
chars = text.split('');

$mahi.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

output = '';

for (i = 0; i < chars.length; i++) {
output += '<span aria-hidden="true" class="myStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}

$mahi.append(output);
});
});
});

</script>


Output :)