Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Labkom99.Com – Banyak cara digunakan untuk membuat efek mouse hover pada gambar dengan HTML dan CSS3.  Kali ini labkom99 membuat animasi mouse hover dengan HTML dan CSS3 namun dengan gaya berbeda. Sebelumnya juga pernah mengulas Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail. Sehingga kumpulan cara membuat mouse hover pada gambar dapat digunakan untuk mempercantik webiste anda.

Efek mouse hover dapat berfungsi ketika mouse diarahkan pada gambar yang bersangkutan. Ketika mouse diarahkan ke atas gambar, layer mask akan berubah bentuk menjadi setengah lingkaran dan informasi seperti judul akan muncul pada gambar.

Penggunaan efek mouse hover pada gambar dapat diterapkan di postingan website atau pada header berita. Efek css ini selain menambah cantik tampilan juga sangat simple penerapannya hanya memerlukan sedikit tag html dan beberapa baris kode css3 saja. 

Alat / Bahan Baku

Notepad 

Bisa menggunakan Tols web programming Lain untuk pemrograman 

Perhatian 

Bagi pemula yang ingin belajar mengunakan  mouse hover pada gambar di bagian ini,  Sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML  cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah

Postingan gambar akan terlihat biasa jika tidak dilengkapi dengan efek-efek tertentu. Nah berikut kode htmlnya agar gambar postingan memiliki efek mouse hover 

<div class="demo">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img  src="images/img-1.jpg">
                    <div class="box-content">
                        <h3 class="title">Labkom99</h3>
                        <span class="post">Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3</span>
                    </div>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img  src="images/img-2.jpg">
                    <div class="box-content">
                        <h3 class="title">Labkom99</h3>
                        <span class="post">Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3r</span>
                    </div>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img  src="images/img-3.jpg">
                    <div class="box-content">
                        <h3 class="title">Labkom99</h3>
                        <span class="post">Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3</span>
                    </div>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Keterangan :

Pada Baris <img src=”images/img-3.jpg”> silahkan ganti dengan lokasi atau URL gambar anda. Pada Baris <h3 class=”title”>Labkom99</h3> merupakan keterangan title atau nama. Pada Baris <span class=”post”> Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3</span>merupakan judul postingan

Kode CSS

.demo{padding: 50px 0;}
.box{
    font-family: 'Ubuntu', sans-serif;
    overflow: hidden;
    position: relative;
}
.box:before{
    content: '';
    background: #3498db;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.4s ease;
}
.box:hover:before{
    height: 70%;
    border-radius: 0 0 250px 250px;
    box-shadow: 0 0 20px #000;
    opacity: 0.9;
}
.box img{
    width: 100%;
    height: auto;
    transition: all 0.45s;
}
.box:hover img{
    opacity: 0.8;
    filter: hue-rotate(180deg);
}
.box .box-content{
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 0 30px;
    opacity: 0;
    transform: translateX(-50%);
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 1;
    transition: all 0.4s ease;
}
.box:hover .box-content{ opacity: 1; }
.box .title{
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 2px;
}
.box .post{
    font-size: 16px;
    text-transform: capitalize;
}
.box .icon{
    padding: 0;
    margin: 0;
    list-style: none;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: 10px;
}
.box .icon li{
    display: inline-block;
    margin: 0 2px;
    transform: translateX(-200px);
    transition: all 0.4s ease;
}
.box .icon li:nth-child(2){ transform: translateX(200px); }
.box:hover .icon li{ transform: translateX(0); }
.box .icon li a{
    color: #fff;
    background-color: #3498db;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    height: 35px;
    width: 35px;
    border: 3px solid #fff;
    display: block;
    transition: all 0.3s;
}
.box .icon li  a:hover{
    color: #3498db;
    background-color: #fff;
    border-radius: 50%;
}
@media only screen and (max-width:990px){
    .box { margin: 0 0 30px; }
}

Demo

Di halaman berikutnya