Image hover #4 (terbalik)
Kamis, 16 Mei 2013 | 0 comments
- Dashboard>Template
- Cari kode </style>
- Copy kode dibawah ini lalu paste diatas kode tadi
#card {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
margin:0px;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s ease-in;
width: 100%;
height: 100%;
font-family:verdana;
color: #000;
font-size:8px;
}
.back {
-webkit-transform: rotateY(180deg);
background: #000000;
overflow: hidden;
}
.front {
}
#card-container {
display: inline-block;
text-align: justify;
}
#card-container:hover .back {
-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
}
- Lalu, copy juga kode ini
<div id="card-container"><div id="card"><div class="back"><center>
<br/><br/><br/><br/>TEXT<br/></div>
<div class="front"><img src="URLIMG"></div></div></div>
<br/><br/><br/><br/>TEXT<br/></div>
<div class="front"><img src="URLIMG"></div></div></div>
- Paste dimana yang kamu mau, contohnya di sidebar
- Save
hijau : text
pink : URL image/gambar
Credit : Tieqa
Label: tutorial
