Skip to content
slickhover jQuery plugin
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


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...

    icon: "images/slickHover/video-white.png",
    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.


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. "" 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
You can’t perform that action at this time.