JQuery Cycle Through Images on Hover

Step 1 I first saw this style slideshow as a Flash solution on Cargo Collective, which has since been updated to Javascript. As it turns out, it’s actually quite easy, making it a quick addition to any site you wish to implement it on. Here’s what we’ll be doing: Super fast slideshow that only runs when hovered over. Overlay logo that toggles between two different states depending on hover state Inspiration piece for this tutorial: Cargo Collective See our end goal by visiting our demo page. The HTML This is the structure for each slideshow, with the images are pulled from the unordered list and turned into a slideshow by jQuery Cycle Plugin. The .link element is where a URL can be provided for when the slideshow is clicked. It is also how we will swap the logo on hovers.

<div class="slideshow-block">
 <a href="http://website.com" class="link"></a>
 <ul class="slides">
  <li><img src="image.jpg"/></li>
 </ul>
</div>

The CSS The dimensions for my slideshow are 200px by 150px. Depending on the sizes of your logo and slides, the below background position coordinates and overall dimensions may need to get adjusted. The logo is toggled between the two color variations using the background position hover technique. The unordered slides list is given a class of “active” when hovered over, making it visible on the page.

*{
 margin: 0;
 padding: 0;
 outline: none;
 border: none;
}
.slideshow-block{
 position: relative;
 width: 200px;
 height: 150px;
 overflow: hidden;
 background: #111 url('img/bg.jpg');
}
a.link{
 position:absolute;
 height: 150px;
 width: 200px;
 display: block;
 z-index: 10;
 background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
 background-position: center -150px;
}
.slides{
 z-index:0;
 visibility:hidden;
}
.slides.active{
 visibility:visible;
}

The jQuery On the jQuery side, we want to accomplish two tasks: Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow. Swap between pause and play states when the slideshow is hovered over. This means the slideshow is hidden and paused when the mouse is not over it.

<script type="text/javascript">
jQuery(function($){

 // Cycle plugin
 $('.slides').cycle({
     fx:     'none',
     speed:   1,
     timeout: 70
 }).cycle("pause");

 // Pause & play on hover
 $('.slideshow-block').hover(function(){
  $(this).find('.slides').addClass('active').cycle('resume');
 }, function(){
  $(this).find('.slides').removeClass('active').cycle('pause');
 });

});
</script>