Labkom99.Com - Banyak cara digunakan untuk membuat efek mouse hover pada gambar dengan HTML dan CSS3 Kali ini labkom99 membuat efek 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 efek mouse hover pada gambar dapat digunakan untuk mempercantik webiste anda.

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

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 membuat efek 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-2.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">Membuat 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






Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3



Labkom99

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Labkom99

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Labkom99

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3


Sourcode Lengkapnya : 

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Labkom99 - Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
 <style>
  .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; }
  }
 </style>
</head>
<body>
 <div class="htmleaf-container">
  <header class="htmleaf-header">
   <h1>Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3</h1>
  </header>
  <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">Lakom99</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">Lakom99</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-3.jpg">
                         <div class="box-content">
                             <h3 class="title">Lakom99</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>
 </div>
</body>
</html>

2 Komentar

Posting Komentar