Membuat Efek Balik Gambar Ketika Hover

Membuat Efek Balik Gambar Ketika Hover - Efek balik gambar ketika Hover, dimaksudkan ketika cursor berada diatas gambar maka gambar akan terhover atau membalik. Menciptakan Efek balik ini cukup dengan menggunakan CSS aja loch sobat tanpa menggunakan Javascript.

Pada efek balik ini kita membutuhkan dua buah gambar yang berbeda, yaitu satu gambar untuk bagian depan dan satu lagi untuk bagian belakang, kemudian gambar akan diatur melalui CSS untuk mempunyai efek bolak balik dengan properti transtition dan transformation. Untuk Demo Anda bisa meng-hover gambar dibawah ini :

Surat Untuk yang Terkasih

Dear Aak,

Kasih ... Aku tak mengerti apa itu cinta, bagaiman itu sayang , dan kau hadir merubah semuanya menjadi indah. ketika hatiku yang beku telah kau cairkan dengan kelembuatanmun, seperti anak panah yang menembus hati ini ketika kau menatapku dengan penuh cinta.

Terkadang cinta itu aneh ..ada yang mengatakan bahwa cinta itu tidak mempunyai kaki, tetapi cinta dapat berjalan dari hati ke hati, dan kini cintajku telah berjalan kehatimu. kini cinta ini t'lah lumpuh untuk tetap berada dihatimu, tidak akan sanggup untuk berjalan meninggalkanmu.

Kasih... cinta ini sederhana. Cukup engkau menjadi milikku, maka aku akan menjadi milikmu selamanya.

Dari yang kau cinta :D

Jalan Menuju Cinta No.01

Kota: Jakarta

Negara: Indonesia

Bagaimana sobat tertarik, baiklah mari kita mulai membuatnya :

Buka Editor Template sobat kemudian temukan kode ]]></b:skin>, Kemudian terapkan kode dibawah ini diatasnya :

CSS

.wrapper {
    position: relative;
    padding-top:50px;
    z-index: 1;
    -webkit-perspective:1000px;
    perspective: 1000px;
    display: inline-block;
    margin:50px auto;
}
.card {
    width: 750px;
    height: 475px;
    margin: 0 auto;
    border:8px solid white;
    cursor:pointer;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*  Properti css transtition digunakan untuk mengatur jeda atau 'delay'.

Misalnya Anda mengganti 0s menjadi 3s maka gambar akan dibalik setelah 3 detik sejak Anda hover. 

Jika 0s berarti gambar langsung dibalik saat hover.
        */
    -webkit-transition: all 1s linear 0s;
    -moz-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    -ms-transition: all 1s linear 0s;
    transition: all 1s linear 0s;
    -webkit-box-shadow: 0px 0px 10px #aaa;
    box-shadow: 0px 0px 10px #aaa;
}
.wrapper:hover .card {
    /*  
            Ubah arah balik kartu - ubah rotateY menjadi rotateX atau rotateZ.
            Properti css "transform" bertanggungjawab bagaimana perilaku kartu saat kita hover - yaitu meletakkan cursor di atasnya.  Cobalah mengubah rotateY menjadi rotateX atau rotateZ dan lihat perbedaannya saat Anda hover.
        */
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*  
Class "front" adalah gambar depan sedangkan "back" adalah gambar belakang.
        */
 .front {
    background-color: #3d3355;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1T1wlN7k4IOnBvj9hLml2IYkeCydcsAm4a1OxHPTj9xANLjdrqIdbPnbzOCBF3_jZ0aABc7W51kvTukZx1MDOa4wip6TsVblwQvjb9HTJDJZYM6y9JhbACTFISzjQmqAYi8keLu43rU/s1600/Surat+Cinta.png');
    background-size: cover;
}
.back {
    background-color: blue;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdawymK45_C1QRY8c2V0MuwmX6q1wP2bMjaWNQD3s4apBy2Zd3bywtwi_O27EItZTyzbV3iY8MAwhHkT6KJz4JUWWgecY_1XYAfmiQOPAYDqbYpbYSKa3IWBQzpiLgPfSDpyj9f2gMjg/s1600/Surat+Cinta1.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    top: 10px;
    color: grey;
    font-family: cursive;
    font-size: 18px;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
h1 {
    font-family:Georgia;
    color:white;
    background-color:black;
    font-size:32px;
    font-weight:normal;
    letter-spacing:-1px;
    max-width:90%;
    display: inline-block;
    text-shadow:0 1px 3px #666;
    padding:4px 25px;
}
.message {
    float:left;
    text-align: left;
    width:42%;
    margin:30px 0 0 40px;
}
.address {
    float: right;
    text-align: left;
    font-size: 21px;
    line-height: 57px;
    padding-top: 139px;
    width: 47%;
}

Selanjutnya sobat simpan Template, kemudian sobat menuju entri baru lalu terapkan kode dibawah ini pada Mode HTML dan publikasikan.

HTML

<div class="wrapper">
    <!-- Elemen 'card' membungkus sisi gambar depan dan gambar belakang -->
    <div class="card">
        <div class="front face">
             <h1>Surat Untuk yang Terkasih</h1>

        </div>
        <!-- Belakang gambar - hanya terlihat setelah gambar dibalik -->
        <div class="back face">
            <div class="message">
                <p>Dear Aak,</p>
                <p>Kasih ... Aku tak mengerti apa itu cinta, bagaiman itu sayang , dan kau hadir merubah semuanya menjadi indah. ketika hatiku yang beku telah kau cairkan dengan kelembuatanmun, seperti anak panah yang menembus hati ini ketika kau menatapku dengan penuh cinta. Terkadang cinta itu aneh ..ada yang mengatakan bahwa cinta itu tidak mempunyai kaki, tetapi cinta dapat berjalan dari hati ke hati, dan kini cintajku telah berjalan kehatimu. kini cinta ini t'lah lumpuh untuk tetap berada dihatimu, tidak akan sanggup untuk berjalan meninggalkanmu.</p>

                <p>Kasih... cinta ini sederhana. Cukup engkau menjadi milikku, maka aku akan menjadi milikmu selamanya.</p>
                <p>Dari yang kau cinta :D</p>
            </div>
            <!-- Alamat di belakang gambar -->
            <div class="address">
                <p>Jalan Menuju Cinta No.01
                    <br>Kota: Jakarta
                    <br>Negara: Indonesia
                    <br>
                </p>
            </div>
        </div>
        <!-- /akhir back -->
    </div>
    <!-- /akhir card -->
</div>
<!-- /akhir pf wrapper -->

Mudah bukan sobat,
Semoga bermanfaat!

Bagikan Artikel ini