3 Efek Keren Pada Images

Dul Kenyot   23.35   Animasi, Blogger, Css, Tutorial   Comment  

Sobat blogger, pada tutorial kali ini saya akan berbagi cara membuat efek images menjadi lebih keren ketika di hover dengan mouse ada 3 variasi efek yang saya bagikan kali ini yaitu tilt efek, morph efek, dan focus efek, ketiga efek ini dalam penerapannya diblog sangatlah mudah dan juga ringan karena hanya menggunkan css saja jadi tidak akan mempengaruhi loading blog sobat.

Cara Membuat 3 Efek Keren Pada Images

Langkah Ke-1: Tambahkan kode css dibawah ini sebelum kode </head>.

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

 <style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  margin: 0; padding: 0;
}
.pic {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;

  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
  float: left;
}
.pic:hover {
  cursor: pointer;
}
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style> 

Langkah Ke-2: Letakan kode HTML dibawah ini dimana sobat akan memunculkannya.

 <div class="tilt pic">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qbtStnPGUYU5VljQ_DC71lylbH2qk0op4OZqXG9lUFTGr4bbKw9Pz_r7i0qFtS6yzV0EYghYrJJSYZ9XIgFPZpV2cZDeGI6zzAo0_tsKoT87I2Z50mWAZ1dub0V9o3hwyjvclvlqXUyh/s400/Aflah-my-son.jpg" alt="">
  </div>
  <div class="morph pic">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qbtStnPGUYU5VljQ_DC71lylbH2qk0op4OZqXG9lUFTGr4bbKw9Pz_r7i0qFtS6yzV0EYghYrJJSYZ9XIgFPZpV2cZDeGI6zzAo0_tsKoT87I2Z50mWAZ1dub0V9o3hwyjvclvlqXUyh/s400/Aflah-my-son.jpg" alt="">
  </div>
  <div class="focus pic">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qbtStnPGUYU5VljQ_DC71lylbH2qk0op4OZqXG9lUFTGr4bbKw9Pz_r7i0qFtS6yzV0EYghYrJJSYZ9XIgFPZpV2cZDeGI6zzAo0_tsKoT87I2Z50mWAZ1dub0V9o3hwyjvclvlqXUyh/s400/Aflah-my-son.jpg" alt="">
  </div> 

Langkah Ke-3: Terakhir Simpan.
SELESAI ! Selamat mencoba.


DEMO SILAHKAN HOVER IMAGES DIBAWAH

Aflah

Aflah

Aflah