Efek Balik Gambar Ketika Hover

Pernah melihat efek gambar dibalik saat Anda meletakkan cursor (hover) di atas gambar tersebut? Tenyata menciptakan efek itu cukup menggunakan CSS saja, tanpa JavaScript. Anda hanya membutuhkan dua buah gambar berbeda. Satu gambar untuk bagian depan dan satu gambar lagi untuk bagian belakang. Efek bolak-balik diatur melalui CSS dengan properti transtition dan transformation.

Lihat demo di bawah ini.


Bagaimana membuatnya?

Mari kita mulai. Mula-mula letakkan CSS berikut di atas tag </b:skin>.

.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://farm3.staticflickr.com/2448/3931792216_d631da71f5_b.jpg');
    background-size: cover;
}
.back {
    background-color: green;
    background-image: url('https://farm5.staticflickr.com/4083/5015208793_7fc3a5cd15_b.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    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%;
}

Adapun HTML-nya sebagai berikut.

<div class="wrapper">
    <!-- Elemen 'card' membungkus sisi gambar depan dan gambar belakang -->
    <div class="card">
        <div class="front face">
             <h1>Judul Gambar, tentu bisa apa saja!</h1>

        </div>
        <!-- Belakang gambar - hanya terlihat setelah gambar dibalik -->
        <div class="back face">
            <div class="message">
                <p>Kepada Lalu Abd.Rahman,</p>
                <p>Dengan suhu tahunan rata-rata -55 derajat Celcius, planet Mars terlalu dingin untuk ditinggali manusia. Ilmuwan sedang mencari cara untuk menghangatkan Mars dengan menciptakan efek rumah kaca buatan.</p>
                <p>Bakteri penghasil metana yang disebut metanogen dapat dimasukkan ke permukaan Mars. Lalu?</p>
                <p>Dari Penggemarmu :P</p>
            </div>
            <!-- Alamat di belakang gambar -->
            <div class="address">
                <p>Jalan Menuju Langit No.17
                    <br>Negara: Indonesia
                    <br>Planet: Bumi
                    <br>Galaksi: Bimasakti
                    <br>
                </p>
            </div>
        </div>
        <!-- /akhir back -->
    </div>
    <!-- /akhir card -->
</div>
<!-- /akhir pf wrapper -->

Mudah bukan?
Selamat belajar...