Membuat Efek Flipping Content Pada Gambar di blog

Demonya

Apa kabar Sobatku semua,,Semoga sobatku Rama, Farixsan, Aby, pokoknya semua dah tanpa terkecuali.. dalam keadaan sehat walafiat & banyak rejekinya hehehe..
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini

Langsung Sobat berikut Langkah2 nya ;

Kodenya

.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); }

Berikut Cara pemasangannya :

Login ke Dasbor Blog Sobat lalu klik template
Cari kode ]]></b:skin> atau </style>, kalau kode </style> ada lebih dari 1 silahkan coba di mana yang cocok
Copy kode yang di table atas kedalam template di atas kode ]]></b:skin> atau </style>
Dan copy kode di bawah ini ke dalam postingan blog

<div class="container-card">
<div class="front">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWT-2pz0-gnyptd6ytPCauwEbX6Q-ox26jsJLKJ_uXfzfDTeRtzMpM5K53PHYJSGLTZAuANIQLb3GnZy6NIvmorLzglD1ckVm3OC5Ak3hCqabxZM49bhdHMOnmdjWAFcT1GARXLnSy1f0/s1600/test.jpg"/>
</div>
<div class="back">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgvSrzN8uLPSSM8ulT2r2DlFOfsw-du2ksGao6vTaes82Srn6lXxQGrPUwrZzsez5xT1qkJ2sk0xq0QplS17oAVwlvZ6Vcm1YB9u0B-1dwsa0ix0PK_Tf5TykLgjtBUnfupDmthH3ixw/s1600/test.jpg" />
</div>
</div>

Semoga bermanfaat

✔ Membuat Efek Flipping Content Pada Gambar di blog

Posting Komentar