3 Efek Keren Pada Images
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> <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> SELESAI ! Selamat mencoba.
DEMO SILAHKAN HOVER IMAGES DIBAWAH
 |
| Aflah |
|
| Aflah |
|
| Aflah |
