Efek Balik Gambar Ketika Hover

Pernah melihat efek gambar dibalik saat Anda meletakkan cursor (hover) di atas gambar tersebut? Tenyata menciptakan efek itu cukup menggun...

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...

COMMENTS

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Efek Balik Gambar Ketika Hover
Efek Balik Gambar Ketika Hover
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipagn9xnPY2Ef9Qtd5v6Z9PMnXNDBZ90cAYLKGaxyntpbkQKPP_r45LEuinaIn0-63wxsO3llgJaDbgdr5kchbc1FhlaL2NrmG8x2UkAaC0zVaSJe7HdTRPPQVRUQ2vZmDiZOUhNka4fI/s1600/flip+image+effect+using+css.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipagn9xnPY2Ef9Qtd5v6Z9PMnXNDBZ90cAYLKGaxyntpbkQKPP_r45LEuinaIn0-63wxsO3llgJaDbgdr5kchbc1FhlaL2NrmG8x2UkAaC0zVaSJe7HdTRPPQVRUQ2vZmDiZOUhNka4fI/s72-c/flip+image+effect+using+css.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/04/efek-balik-gambar-ketika-hover.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/04/efek-balik-gambar-ketika-hover.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content