Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

     No comments
Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :


Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :





<!doctype html>



<html><head>



<title>Cardfan</title>



<style type="text/css">



<!--



#cardfan, #cardfan img { width: 400px; height: 350px; }



#cardfan { margin: 0 auto; }



#cardfan img { border: 32px solid #ffe;



box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);



position: absolute;



transform-origin: center 300px;



}



#cardfan:hover img:first-child {



transform: rotate(25deg);



}



#cardfan:hover img:last-child {



transform: rotate(−25deg);



}



-->



</style>



</head>



<body>



<div id="cardfan">



<img src="gambar agan. disini" alt="terserah agan">



<img src="gambara agan disini" alt="terserah agan">



</div>



</body>



</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

0 comments:

Post a Comment