Ok sobat pada kesempatan ini kembali lagi seocips.com akan membagikan tutorial membuat efek gambar pada Blog Blogger, nah untuk kali ini kita akan membuat efek Hover 3d pada gambar blog. Sebelumnya juga seocips telah membagikan efek hover yang tidak kalah keren dengan efek ini, yaitu effect flipping content pada gambar blog. Maksudnya efek Hover disini adalah efek yang keluar jika kursor pointer mouse di arahkan pada object gambar yang ada di postingan.

Membuat Efek Hover 3D pada Gambar Blog
Mau lihat demonya? cekidottttt...


Berikut ini adalah kodenya yang dapat sobat letakan dalam Mode HTML pada postingan Blog atau bisa juga di letakan pada widget HTML Blog anda.
<style>
.seocipstmb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.seocipstmb a {
display: block; width: 100%; height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://2.bp.blogspot.com/-R_QA4y6FvqU/VVYNSby8gGI/AAAAAAAAExI/ORHay_oeR28/s420/seocips-image-hover-effect.png");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.seocipstmb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
.seocipstmb a:after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
}
.seocipstmb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
.seocipstmb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.seocipstmb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>
<div class="seocipstmb">
<!-- Image -->
<a href="http://blog.spezer.net/">
<span>Three-eyed Robot</span>
</a>
</div>
Kode berwarna merah diatas adalah gambarnya dan kode berwarna biru adalah url/ link tujuan, silahkan diganti sesuai keinginan.
Bagaimana? keren gak sob? ok semoga bermanfaat.
3 Komentar untuk "Membuat Efek Hover 3D pada Gambar Blog"

gan cara buat permalink di bawah postingan + gambar dan ada kolom subscribe nya gimana ya?

Keren banget nih mas, ijin comot kodenya

lihat demonya kren banget gan, efeknya cukup bagus buat yagn mengelola blog magazine :D