Tutorial image flip and link

Monday, May 11, 2015

Today is what day,but this is written by curious

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