Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 24 May 2016

On Mousehover Div rotate

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".card").hover(function() {
   $(this).addClass("flipped");
}, function() {
    $(this).removeClass("flipped");
});
});
</script>
<style>
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    width: 99%;
    height: 370px;
    position: relative;
    margin: 0 0 20px auto;
    display: inline-block;
    white-space: normal;
}

.flip .card {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.flip .card.flipped {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
}

.flip .card .front {
    position: absolute;
    z-index: 1;
    background: #f9f9f9;
    border: solid 1px #ccc;
    border-radius: 2px;
    color: transparent;
    cursor: pointer;
    padding: 38px 23px;
    display: block;
}
.card img.home_icon {
    max-width: 160px;
    margin: 0 auto 20px;
    width: 100%;
    margin-top: 36px;
    max-height: 200px;
}
.whatwedo_home a {
    color: #333;
}
.flip .card .front h2 {
    padding: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    text-align: center;
    letter-spacing: 0px;
    text-decoration: none;
}

.flip .card .back {
    -webkit-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    background: #29BBEA;
    cursor: pointer;
    padding: 30px 10px;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index: 2;
}

.flip .card .back h2 {
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
}

.flip .card .back ul {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding-left: 0;
    list-style: none;
}
.flip .card .back ul li {
    padding: 6px 0;
    text-align: center;
    margin: 0px;
}
.flip .card .back ul a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.flip .card .back ul a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.flip .card .back ul a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
}
.flip .card .back ul a::after, .flip .card .back ul a::before {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s,opacity .2s;
    -o-transition: -o-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
</style>
</head>
<body>
<div class="flip">
          <div class="card"> <a href="https://akshaysyal.wordpress.com/" class="face front"> <img src="http://logopals.com/img/design1.png" data-lazy-type="image" data-lazy-src="/media/2015/06/atomix_brain.png" alt="" class="lazy img-responsive home_icon" style="">
           
            <h2>WE DESIGN</h2>
            </a>
            <div class="face back">
              <h2>WE DESIGN</h2>
              <ul>
                <li><a href="">Responsive Website </a></li>
                <li><a href="">Website Maintenance</a></li>
                <li><a href="">Small Business Website &nbsp;</a></li>
                <li><a href="">Newsletter Design</a></li>
    <li><a href="">Photographer Website</a></li>
               <li><a href="">Real Estate Website&nbsp;</a></li>
               <li><a href="">Landing Page Design</a></li>
              </ul>
            </div>
          </div>
        </div>

</body>
</html>

Thursday 10 March 2016

A Larger Image OnClick With JavaScript With Thumbnails On Same Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
            function showImage(imgName) {
                var curImage = document.getElementById('currentImg');
                var thePath = 'images/';
                var theSource = thePath + imgName;
               
                curImage.src = theSource;
                curImage.alt = imgName;
                curImage.title = imgName;
            }
        </script>
<style type="text/css">
#mainContainer, #footerArea {
    clear: both;
    width: 700px;
    margin: 10px;
}
#leftNav {
    float: left;
    width: 150px;
    margin-right: 15px;
    border-right: 1px solid #000;
    text-align: center;
}
#rightDisplay {
    float: right;
    width: 530px;
    margin: 0;
    text-align: center;
}
img {
    margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
  Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->

  <div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
    <img src="images/bridget_moynahan_01_tn.jpg"  onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
    <img src="images/bridget_moynahan_02_tn.jpg"  onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
    <img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
    <img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
    <img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
  <div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>

</body>
</html>

Tuesday 8 March 2016

Show Hide

HTML

<a href="#" onclick="showHideDiv('div-1')">Awards</a>
<a href="#" onclick="showHideDiv('div-2')">Awards</a>
<a href="#" onclick="showHideDiv('div-3')">Awards</a>
<a href="#" onclick="showHideDiv('div-4')">Awards</a>
<a href="#" onclick="showHideDiv('div-5')">Awards</a>

<div id="div-1" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-2" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


<div id="div-3" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


JAVA SCRIPT

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
function showHideDiv(id){
 var obj = document.getElementById(id);
if (obj.style.display=="none"){
 obj.style.display='block';
} else if(obj.style.display=="block"){
 obj.style.display='none';
}
}
</script>

Monday 7 March 2016

All media query for all screen version


bootstrap media query use in simple style 
 
    @media (max-width: 1224px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 768px) {} 
    @media (max-width: 640px) {}
    @media (max-width: 420px) {}
    @media (max-width: 320px) {}
    @media (max-width: 220px) {}