Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Lakom99

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3
Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Lakom99

Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3

Lakom99

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>

Kesimpulan :

Dengan cara sederhana dapat menghasilkan hasil yang keren dalam membuat efek animasi. Efek animasi ini dapat digunakan untuk mempercantik tampilan website atau untuk membuat efek karismatik pada gambar. Cara penggunaanyapun cukup mudah dan simpel untuk dipraktikkan. Selamat Mencoba..!

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

0 comments