How To Change images in a loop on hover using jQuery


Change images in a loop on hover

In This Article You find How To Change images in a loop on hover is a very common functionality that you’ll often find on e-commerce websites or portfolio websites. As an example, on the product list page, when you mouse over any product thumbnail, all the other images associated with that product start showing on top of the thumbnail after a specific interval. Many websites only have 2 images looping, which can be easily achieved via CSS only. But when there are more than 2 images to loop, you’ll need the help of a client side library. In this post, we’ll learn how to start the image loop on mouse over and then stop and reset the first image again on mouse out.

HTML Markup 

To get started, create a couple of div elements which contain the images. Each div element will contain a set of images and image rotation will be controlled from within this set. All the images have “preview” as the CSS class. It’s a dummy CSS class that doesn’t have any styling, but it will be used in the jQuery code as a CSS selector to select the images. The images used for this post are from the Free Images website.

<div class="list">
   <img src="https://images.freeimages.com/images/previews/dbb/shirt-1-1457400.jpg" class="preview" />
   <img src="https://images.freeimages.com/images/previews/025/shirt-2-1457399.jpg" class="preview" />
   <img src="https://images.freeimages.com/images/previews/2d6/shirt-3-1457403.jpg" class="preview" />
</div>
<div class="list">
   <img src="https://images.freeimages.com/images/previews/624/in-the-garden-1-1378570.jpg" class="preview" />
   <img src="https://images.freeimages.com/images/previews/7da/in-the-garden-2-1378564.jpg" class="preview" />
   <img src="https://images.freeimages.com/images/previews/9b6/in-the-garden-3-1378559.jpg" class="preview" />
   <img src="https://images.freeimages.com/images/previews/373/in-the-garden-4-1378553.jpg" class="preview" />
</div>

CSS

The following is the only CSS class used to set the width and height of all the images:

img

{ width: 300px;

height: 300px;

}


 

Leave a Reply

Your email address will not be published. Required fields are marked *