Monday, May 11, 2015

Tutorial image flip and link

Annyeonghaseyo..
Today tutorial is image flip and link.I mean,hover on the image,it will flip..and at the back image,will give you the link,or put something you want.


Let's start:
  • Blogger > Layout > Add HTML Javascript
  • Code below,copy and paste in it

<style>

#card {
cursor:crosshair;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease-in;
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
font-weight: bold;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
#card-container {
cursor:crosshair;
display: inline-block;
text-align: justify;
}
#card-container:hover .back {
-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {  
-webkit-transform: rotateY(-180deg);
}

a.navigateu {
display:inline-block;
padding-top:40px;
width:100px;
height:60px;
color: #999;
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);
text-align:center;
margin-bottom:10px;

}
</style>
<div id="card-container">
    <div id="card">
        <div class="back"><a class="navigateu"  href="http://tutorialsfreebies.blogspot.com">about</a></div>
        <div class="front"><img src="http://s6.favim.com/orig/65/asian-clothing-fashion-female-Favim.com-575925.jpg"height="100/" width="100"  /></div>
    </div></div>


  • green:Change your link/or whatever you want
  • red:image after flip
  • blue:image before flip