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 :)