Archive Pages Design$type=blogging

3 Efek Keren Pada Images

S obat blogger, pada tutorial kali ini saya akan berbagi cara membuat efek images menjadi lebih keren ketika di hover dengan mouse ada 3 va...


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="http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
</div>
<div class="morph pic">
<img src="http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
</div>
<div class="focus pic">
<img src="http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
</div>
Langkah Ke-3: Terakhir Simpan.
SELESAI ! Selamat mencoba.


DEMO SILAHKAN HOVER IMAGES DIBAWAH

Aflah
Aflah
Aflah

COMMENTS

Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: 3 Efek Keren Pada Images
3 Efek Keren Pada Images
http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s640/Aflah-my-son.jpg
http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s72-c/Aflah-my-son.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/09/3-efek-keren-pada-images.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/09/3-efek-keren-pada-images.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago