Sunday, January 27, 2013

Tutorial : Two Image Hover

CLICK Pic to Preview

こんにちは, 안녕하세요 , Assalamualaikum. dua hari tak buat tutorial , macam-macam komen huhu . Tapi hari ni atin dah kembali ke tuto lagi . Hari ni Atin nak bagi tuto image hover effect punya. Ini style baru ek? hihi . Korang nak try boleh tapi pandai2 lah edit ukur sendiri eh. Sebab Atin ni pemalas orangnya haha .. nak tengok korang clcik gambar atas ni then . mase kat sana korang hala cursor . Jadi ap? huhu.. try la.

  • Blogskins/ Classic template : Paste bawah </style>
<style>
.container {
  position: relative;
  margin: 30px;
  height: 300px;
  width: 650px;
  float: left;
}

/*PHOTO SHAPE*/
.picone, .pictwo {
  border: 5px solid #fff;
  border-radius: 3px;
  height: 200px;
  margin: 20px;
  position: absolute;
  width: 300px;

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
          box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}


/*SPECIFIC PHOTOS*/
.picone {
  -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
       -o-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

.pictwo {
  left: 100px;
  -webkit-transform: rotate(7deg);
     -moz-transform: rotate(7deg);
       -o-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
          transform: rotate(7deg);
}

/*HOVERS*/
.container:hover {
  cursor: pointer;
}

.container:hover .picone {
  -webkit-animation: picone 1.5s 2 alternate;
     -moz-animation: picone 1.5s 2 alternate;
      -ms-animation: picone 1.5s 2 alternate;
       -o-animation: picone 1.5s 2 alternate;
          animation: picone 1.5s 2 alternate;
}

.container:hover .pictwo {
  -webkit-animation: pictwo 1.5s 2 alternate;
     -moz-animation: pictwo 1.5s 2 alternate;
      -ms-animation: pictwo 1.5s 2 alternate;
       -o-animation: pictwo 1.5s 2 alternate;
          animation: pictwo 1.5s 2 alternate;

}

/*KEYFRAME ANIMATIONS*/
@keyframes "picone" {
 0% {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
 }
 50% {
    -webkit-transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -o-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
 }
 100% {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
 }

}

@-moz-keyframes picone {
 0% {
   -moz-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -moz-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -moz-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-webkit-keyframes "picone" {
 0% {
   -webkit-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -webkit-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -webkit-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-ms-keyframes "picone" {
 0% {
   -ms-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -ms-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -ms-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-o-keyframes "picone" {
 0% {
   -o-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -o-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -o-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@keyframes "pictwo" {
 0% {
    left: 100px;
    z-index: 1;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
 }
 49% {
    left: 350px;
    z-index: 1;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
 }
 50% {
    left: 350px;
    z-index: -3;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
 }
 100% {
    left: 100px;
    z-index: -3;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
 }

}

@-moz-keyframes pictwo {
 0% {
   left: 100px;
   z-index: 1;
   -moz-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -moz-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -moz-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -moz-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-webkit-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -webkit-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -webkit-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -webkit-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -webkit-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-ms-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -ms-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -ms-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -ms-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -ms-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-o-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -o-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -o-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -o-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -o-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}
</style>

  • Then copy code ke-2 bawah ni dan paste kat bahagian yang korang suka .
<div class="container">
<img class="picone" src="URL IMAGE 1" />
  <img class="pictwo" src="URL IMAGE 2" />
</div>

4 comments:

Intan Nursyafiqah said...

hehe...unnie atin~ nice tuto~ hehe...XD x silap org kn ?? *cek btul2* btul2 ^^ gumawo~ :D

Pykaa Pdott said...

kalo nak letak pic banyak mana pon boleh ke ??

Atin Tory said...

@Pykaa Pdott : xboleh.. 2 je :)

Yumida Huda said...

WAH..PANDAINYE BUAT TUTO..CUTE PULAK TU..

FOLLOW SINI..YG KE 1476..JEMPUT SINGGAH KE BLOG