Membuat Dampak Balik Gambar Saat 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 memakai CSS aja loch sahabat tanpa memakai Javascript.

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

Surat Untuk yang Terkasih

Dear Aak,

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

Terkadang cinta itu absurd ..ada yang menyampaikan bahwa cinta itu tidak memiliki kaki, tetapi cinta sanggup berjalan dari hati ke hati, dan sekarang cintajku telah berjalan kehatimu. sekarang cinta ini t'lah lumpuh untuk tetap berada dihatimu, tidak akan sanggup untuk berjalan meninggalkanmu.

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

Dari yang kamu cinta :D

Jalan Menuju Cinta No.01

Kota: Jakarta

Negara: Indonesia

Bagaimana sahabat tertarik, oke mari kita mulai membuatnya :

Buka Editor Template sahabat kemudian temukan kode ]]></b:skin>, Kemudian terapkan aba-aba 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 dipakai untuk mengatur jeda atau 'delay'.

Misalnya Anda mengganti 0s menjadi 3s maka gambar akan dibalik sehabis 3 detik semenjak Anda hover. 

Jika 0s berarti gambar eksklusif dibalik ketika 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 sikap kartu ketika kita hover - yaitu meletakkan cursor di atasnya.  Cobalah mengubah rotateY menjadi rotateX atau rotateZ dan lihat perbedaannya ketika 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" yakni gambar depan sedangkan "back" yakni gambar belakang.
        */
 .front {
    background-color: #3d3355;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGoYCWSr74Z-B09jz9GAXkvJjZjFmZwOWZVShn-fZz673pO-sci5_9KhzUhEPBMxmsBXHLi_ugvem2PrGPNZc7YREcb1-KsaPtdfIPfynnI0ysev9rSNaezdm4rdywzIflMXikAJKql4/s1600/Surat+Cinta.png');
    background-size: cover;
}
.back {
    background-color: blue;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUggowEglLStw1UhkyxsAhjNRo4volvcdkHRvJrmRIRJJH4MyiMwDEb29zdQ7TmwQHCOfn3f51aPLxm7-3OctXlX548DCHrXacgM7AxWko6MU2U94gRPiAB0ZzB4iW1w0z-DyqQZuRK0/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 sahabat simpan Template, kemudian sahabat menuju entri gres kemudian terapkan aba-aba 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 sehabis 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 kamu hadir merubah semuanya menjadi indah. ketika hatiku yang beku telah kamu cairkan dengan kelembuatanmun, ibarat anak panah yang menembus hati ini ketika kamu menatapku dengan penuh cinta. Terkadang cinta itu absurd ..ada yang menyampaikan bahwa cinta itu tidak memiliki kaki, tetapi cinta sanggup berjalan dari hati ke hati, dan sekarang cintajku telah berjalan kehatimu. sekarang 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 saya akan menjadi milikmu selamanya.</p>
                <p>Dari yang kamu 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!

Sumber http://www.websiteedukasi.com/