Slickhover.js is a lightweight useful jQuery plugin that produces a slick and smooth hover effect that fades out images and shows a custom icon when a user hovers over an image. All you have to do is call it on an image selector...
View Demo | Buy Author a Coffee
All you have to do is call it on an image and pass in the options you want. For example...
$(window).load(function(){
$('.slickHoverVideo').slickhover({
icon: "images/slickHover/video-white.png",
color:"#ffcc66",
opacity:0.5,
speed:800,
animateIn: true
});
});
It's best to call Slickhover.js on
For best results, set the following CSS for the images that you are calling Slickhover on....
img {
color: transparent;
font-size: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
position: relative;
z-index: 2;
}
Below is a listing of options your can set....
Option | Value | Default Value | Description | Example |
---|---|---|---|---|
icon | String | "images/slickhover/zoom-white.png" | The path to the icon (relative to the place slickhover is called from -- not the location of the .js file.) You could also use an absolute path e.g. "http://www.9bitStudios.com/images/slickhover/zoom-white.png" | icon: "images/slickHover/video-white.png" |
color | String (hex color) | "#000000" | Hex value that changes the color of the overlay | color: "#000033" |
opacity | Decimal (between 0 and 1) | 0.2 | How opaque to make the image, with 0 being completely opaque and 1 having no opacity. 0.5 would be the value in-between | opacity: 0.6 |
speed | Integer (in milliseconds) | 400 | The speed of the fade and animation transition. 1000 ms = 1 second | speed: 800 |
animateIn | Boolean | false | Sets whether or not to animate the icon in on hover. | animateIn: true |