Hover adalah salah satu element css yaitu suatu efek atau perubahan yang terjadi apabila kursor kita mengarah pada suatu object maka objek tersebut akan mengalami perubahan seperti gerak, redup atau lebih terang ataupun memutar. Tapi disini saya akan membuat sebuah efek gambar menjadi overlay dan slicedown yang transparan. untuk membuatnya kita menggunakan bantuan jQuery v1.8.2 yang bisa didownload gratis di official websitenya www.jquery.com.
Pertama kita akan membuat sebuah CSS dengan nama " sixghakreasi.css"
.adipoli-wrapper
{
margin:auto;
position:relative;
display: inline-block;
}
.adipoli-wrapper>img
{
position: absolute;
z-index: 1;
}
.adipoli-before
{
position: absolute;
z-index: 5;
}
.adipoli-after
{
position: absolute;
z-index: 10;
}
.adipoli-slice {
display:block;
position:absolute;
z-index:15;
height:100%;
}
.adipoli-box
{
display:block;
position:absolute;
z-index:15;
}Setelah itu Buat sebuah file html dengan nama misalnya "hover.html"
<html>
<head>
<title>Efek Hover sixghakreasi.com</title>
<link href="sixghakreasi.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="jquery.adipoli.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image1').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$('.image2').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
});
</script>
</head>
<body>
<img class="image1" src="3.png"> <img class="image1" src="4.png"><br />
<img class="image2" src="1.png"> <img class="image2" src="2.png">
</body>
</html> Berikut kami share link download :
