Tutorial Membuat Efek Hover Pada Gambar Menggunakan CSS3

hvr

Dalam dunia web yang modern, ada banyak teknik yang dapat digunakan untuk membuat interface dan interaksi website yang menarik, tapi yang paling sederhana dan paling elegan biasanya CSS, dan khususnya CSS3 dengan berbagai fitur baru.

Dulu, kita harus bergantung pada javascript untuk membuat efek seperti ini, namun dengan semakin meningkatnya support untuk CSS3 di browser, sekarang kita bisa membuat efek seperti ini tanpa scripting sama sekali. Sayangnya IE9(Internet Explorer 9) dan versi dibawahnya masih tidak support CSS3.

Kali ini kita akan membuat efek hover pada gambar yang menyembunyikan caption sebelum gambar itu di hover.

Kalian bisa melihat demonya disini.

Markup HTML

Kita akan menggunakan unordered list lalu kita wrap caption dan gambar didalamnya, perhatikan bahwa kita juga akan menambah class demo dan efek dalam tag unordered list. kita akan membuat efek kartu yang membalik. Ini berarti ketika Anda hover mouse Anda pada gambar itu, maka gambar akan berputar membalik untuk menampilkan caption, Kita juga akan menggunakan HTML5 figure element dengan tag figure caption didalamnya, markupnya akan terlihat seperti ini:

<ul class="demo">
   <li>
      <figure>
         <img src="image1.jpg" alt=""/>
         <figcaption>
            <h2>Ini Judul</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
         </figcaption>
      </figure>          
   </li>
</ul>

CSS

Pada CSSnya, Kita akan menetapkan figure gambar ke posisi relatif dan kemudian menyembunyikan backface-visibility. Kita juga akan menggunakan rotateY transform: -180 derajat(degrees) untuk figcaption dan mengubahnya ke 180 derajat untuk hover dari gambar dan caption:

body {
    background:#3498db;
    overflow: hidden;
}


ul {
    margin:12px auto;
    width:30%;
}

ul li {
    display: inline-block;
    list-style: none;
    margin:0 10px;

}
.demo {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}

.demo figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}

.demo figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}

.demo figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.demo figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}

.demo figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}

.demo figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

.demo figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

Dengan demikian kitaberhasil membuat efek hover kartu membalik pada gambar. untuk previewnya bisa dilihat disini.

Sekian tutorial membuat efek hover pada gambar menggunakan CSS3. Terima kasih..

Comments

comments