SEPESER.COM

Effect hover : fall backwards

Animasi Hover

Cara Membuat Efek Hover fall backwards di Postingan Blogger

Tampilan HTML

<style>
.sepesertmb { width:400px; height:300px; margin:70px auto; perspective:1000px; }
.sepesertmb a { display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsEZxpOOdn7d2QApvSeVn5Piju1xo2SL_4OMT3c50-6Io6_b2JDftDW_PMqKNMvEirnOteGeC-xTF8QccpMdj-Xl_faDDTxM_QR3tnnqjqIjXUSC7n-jpgt1YTEVo13NobfJmHkv7BfZO3/s420/haisob-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; }
.sepesertmb:hover a { transform:rotateX(80deg); transform-origin:bottom; }
.sepesertmb 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; }
.sepesertmb 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; }
.sepesertmb 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; }
.sepesertmb: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="sepesertmb">
 <!-- Image -->
 <a href="https://www.sepeser.com/">
  <span>Three-eyed Robot</span>
 </a>
</div>

Image Hover Effect: Flipping Content

Efect hover Flipping Content

Memasang CSS Efek Flipping Content di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Tema 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin> atau di atas </style>

.container-card { position:relative; height:300px; width:300px; margin:20px auto; }
.container-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; background:#3C404B; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
.container-card > div.back { background:#000; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
.container-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.container-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.container-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }

4. Save Tema.

Menampilkan efek hover Flipping Content pada gambar di Postingan

Untuk menerapkannya pada postingan blog contohnya adalah kode di bawah ini, diletakan dalam mode Tampilan HTML postingan

Tampilan HTML

Gunakan kode di bawah ini

<div class="container-card">
<div class="front">
<img src="Link Gambar Depan"/>
</div>
<div class="back">
<img src="Link Gambar Belakang" />
</div>
</div> 

Ganti kode berwarna biru diatas dengan url/link gambar pada bagian depan dan ganti kode berwarna merah diatas dengan url/link gambar pada bagian belakang.

Efek Hover : Brightness

Efek Hover Pada Gambar

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

Tambahan

Efek hover Shadow border radius 2

Video Tutorial

Cara 1: Membuat Efek Hover Zoom Berputar Pada Gambar di Tema Blogger

Video Tutorial

<style>

.post-body img{padding:5px; box-shadow:0 0 3px #333;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}

.post-body img:hover{ padding:15px; box-shadow:0 0 15px #000; -o-transform: scale(0.9) rotate(360deg); -moz-transform: scale(0.9) rotate(360deg); -webkit-transform: scale(0.9) rotate(360deg);border-radius:50%; }

</style>

Efek Hover Pada Gambar

Edit HTML

.gbr { height:280px; width:280px; overflow:hidden; border:0 solid white; margin:5px auto; -webkit-box-shadow:5px 5px 5px #111; box-shadow:5px 5px 5px rgba(0,0,0,0.5); }

.gbr:hover { cursor:pointer; }

.nahini { -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; }

.nahini:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

Tampilan HTML

<div class="nahini gbr">

<a href="https://www.sepeser.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAe4cutTrjGXZN88xPdDerInYRfvt59evOePh3Iz6K60C-nYM58iMWRQ-qJ94UZ8IVTquqU0FsOvtI7x8X1KF4M192ga93QlHJBiS5DIBmpqNaOizqH8xhxzBxqXT1P1sgaIPMJO0GfY/s1600/efek-gambar-seocips.jpg" alt="template blog"/></a>

</div>