Slickhover.js

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 $(window).load (as opposed to $(document).ready) so that Slckhover can figure out positioning based on image dimenstions.

CSS

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;
}

Options

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