Cara Membuat Effect Transition Hover Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

alhamdulillah saya masih bisa menulis tutorial di blog ini.
tutorial yang akan saya bahas kali ini yaitu Cara Membuat Effect Transition Hover Dengan CSS

effect ini merupakan fitur terbaru dari css3,

effect ini bisa du gunakan untuk button image dan seabagainya,

namun disini saya memakai image untuk percobaannya.

tidak usah nerlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Menyiapkan File
sebelum memulai coding kita harus menyiapkan file yang di butuhkan terlebih dahulu,
disini saya membuat folder bernama 'effect'
untuk lebih jelasnya lihat gambar berikut.

gambar tersebut merupakan isi di dalam folder 'effect'
folder image untuk menaruh gambar yang ingin di beri Effect Transition Hover
file bg.jpg merupakan background
file index.html dan file css merupakan file inti yang akan kita buat
silahkan ambil foto dan masukkan ke dalam folder preject/images yang akan kita buat

2. Membuat File HTML
seperti tutorial yang lainnya, silhkan buat file bernama index.html dan isikan script berikut

<!DOCTYPE html>
<html>
<head>
<title>Fancy Hover Effect #1 - CSS3 Transitions Demonstration</title>
<link rel="stylesheet" href="masterstyle.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>

<header id="header">
 <h1>CSS3 Transitions</h1>
 <div class="clearfix"></div>
</header>

<section id="wrapper">

 <div class="imgholder">
  <div class="outer1 circle"></div>
  <div class="outer2 circle"></div>
  <figure>
   <img src="images/admin.jpg" />
   <figcaption class="caption">- Belajar Coding -</figcaption>
  </figure>
 </div>

 <div class="clearfix"></div>
</section>

</body>
</html>

3. Membuat File CSS
file css disini saya beri nama masterstyle.css script css disini hanya mengubah style pada header dan style pada body, silahkan ketik script berikut.

body{
 font-family:Cambria, Georgia, serif;
 line-height:1.5;
 font-size:100%;
 background:url(bg.jpg) 0 0 repeat;
 margin:0;
 padding:0;
}
header, section, footer, nav, hgroup{
 display:block;
}
a{
 color:#35BFFF;
 text-decoration:none;
}
a:hover, a:active{
 color:#91DCFF;
}

/* Header */
#header{
 width:100%;
 background:#000;
 background:rgba(0, 0, 0, 0.8);
 color:#eee;
 padding:15px 0;
 letter-spacing:1px;
 margin-bottom:20px;
 position:relative;
 top:0;
 left:0;
 z-index:99;
}
#header h1{
 padding:0 20px;
 margin:5px 0;
 text-shadow:0px 1px 1px #333, 1px 2px 2px #FAFAFA;
 text-align: center;

}

/* clearfix */
.clearfix {
 clear:both;
}

4. File CSS Inti
kenapa di beri nama file css inti ? karena file ini merupakan file yang berisi script css untuk Membuat Effect Transition Hover
silahkan beri nama style.css dan silahkan ketik script berikut

.imgholder{
 position:relative;
 width:120px;
 height:120px;
 border-radius:100px;
 float:center;
 margin:50px 610px;
 cursor: pointer;
}
/* thumbnails style */
.imgholder img{
 position:absolute;
 left:0;
 top:0;
 width:120px;
 height:120px;
 z-index:5;
 opacity:0.5;
 filter: alpha(opacity = 50);
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 box-shadow:0 0 5px #000;
 
 transition: 
  opacity 0.7s ease-out 0.3s;
 -moz-transition: 
  opacity 0.7s ease-out 0.3s;
 -webkit-transition: 
  opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img{
 opacity:1;
 filter: alpha(opacity = 100);
}
.imgholder figcaption{
 position:absolute;
 left:0;
 top:120%;
 width:120px;
 color:#004E87;
 text-shadow:-1px -1px 0 #fff;
 z-index:4;
}
/* decorations style */
.imgholder .circle{
 position:absolute;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
}
.imgholder .outer1{
 top:-8px;
 left:-8px;
 width:120px;
 height:120px;
 z-index:2;
 
 border:8px solid;
 border-color:#DEEBFC;
 box-shadow:0 0 3px #AFD3FF;
 -moz-box-shadow:0 0 3px #AFD3FF;
 -webkit-box-shadow:0 0 3px #AFD3FF;
 
 background: #ffffff;
 background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
 background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
 
 transition: 
  box-shadow 1s ease-out,
  border-color 1s;
 -moz-transition: 
  -moz-box-shadow 1s ease-out,
  border-color 1s;
 -webkit-transition: 
  -webkit-box-shadow 1s ease-out,
  border-color 1s;
}
.imgholder:hover .outer1{
 border-color:#0088EA;
 box-shadow:0 0 10px #0285E2;
}
.imgholder .outer2{
 top:-18px;
 left:-18px;
 width:136px;
 height:136px;
 z-index:1;
 
 border:10px solid;
 border-color: #9BC8FF;
 box-shadow:0 0 3px #8EB9FF;
 -moz-box-shadow:0 0 3px #8EB9FF;
 -webkit-box-shadow:0 0 3px #8EB9FF;
 opacity:0;
 filter: alpha(opacity = 0);
  
 transition: 
  opacity 0.7s ease-out 0.3s,
  box-shadow 0.7s ease-out 0.3s;
 -moz-transition: 
  opacity 0.7s ease-out 0.3s,
  -moz-box-shadow 0.7s ease-out 0.3s;
 -webkit-transition: 
  opacity 0.7s ease-out 0.3s,
  -webkit-box-shadow 0.7s ease-out 0.3s;
}

.imgholder:hover .outer2{
 opacity:1;
 filter: alpha(opacity = 100);
 box-shadow:0 0 20px #8EB9FF;
}

cukup simple kan ? ^_^
mohon maaf jika tidak ada demonya hehe :)
ya sudah mungkin itu dulu yang dapat saya sampaikan, :)
silahkan anda coba dan anda kembangkan sendiri :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D