Is there a way for me to make my image source dynamically switch between 3-4 different images when hovered over?

I'm in the midst of a college project where I'm designing a clothing website. What I'm aiming for is to have the product image on the main feed change between 3-4 images of the same product with a quick transition when a user hovers over it.

This is the HTML code I have so far:

<div class="imagebox">
                <a href="#"><img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 "></a>
            </div>

This is the CSS code:

.imagebox{
display: inline-block;}

.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}

Is there a way to achieve this effect using CSS or JavaScript?

javascripthtmlcssimagesrc

Answer №1

I have created a JavaScript example that I believe can be beneficial.

let intervalId;
let i = 0;

document.querySelectorAll('.product-images').forEach((poroduct) => {
  const productImages = poroduct.querySelectorAll('img');

  poroduct.addEventListener('mouseenter', function() {
    fadeImg(productImages);
    intervalId = setInterval(() => fadeImg(productImages), 1500);
  });

  poroduct.addEventListener('mouseleave', function() {
    clearInterval(intervalId);
    productImages[i].classList.remove('active');
    productImages[0].classList.add('active');
    i = 0;
  });
});

function fadeImg(productImages) {
  productImages[i].classList.remove('active');
  i = (i + 1) % 4;
  productImages[i].classList.add('active');
}
.container {
  display: flex;
}

.imagebox {
  position: relative;
  flex: 1;
  margin: 15px;
}

.imagebox img {
  max-height: 200px;
  max-width: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 500ms;
}

.imagebox img.active {
  opacity: 1;
}
<div class="container">
  <div class="imagebox">
    <a href="#" class="product-images">
      <img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
      <img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
      <img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
      <img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
    </a>
  </div>

  <div class="imagebox">
    <a href="#" class="product-images">
      <img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
      <img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
      <img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
      <img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
    </a>
  </div>

  <div class="imagebox">
    <a href="#" class="product-images">
      <img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
      <img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
      <img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
      <img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
    </a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

htmlcssexpand

Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click: 1. The active tab should display a blue underline color. 2. When clicking on a tab, the blue line should appear under the active tab (sim ...

htmlcssbootstrap-4tabsangular7

Discovering which chip has wrapped to the next line in Material UI Autocomplete can be found by closely inspect

Currently, I am working with a Material UI autocomplete feature that functions as follows: https://i.sstatic.net/4LrwI.png My goal is to determine when the fourth chip wraps to the next line within the autocomplete so that I can proceed with additional c ...

javascriptreactjsreact-reduxreact-hooksmaterial-ui

JavaScript: A timer that relies solely on the concept of TIME

Hello all, I have a specific question regarding starting a timer in JavaScript for a test scenario. Despite researching on my own and seeking help on various platforms, I haven't found a solution that fits my requirements. I am looking to implement a ...

javascriptphpdatabasetimercountdown

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below: <img :s ...

javascriptvue.js

What is causing my mobile version not to resize and adjust to fit the screen properly?

Currently utilizing Bootstrap 4 along with the viewport meta tag, %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/ Even after hiding all images with .hidden-xs-up, the display on Chrome mobile appear ...

csstwitter-bootstrapresponsive-design

Ways to adjust the color of individual elements within an array

I am currently working on developing a sorting Visualizer using React. My focus right now is on implementing BubbleSort. Below is the structure of my program: https://i.sstatic.net/3TKqe.png Below is the code snippet I have written for this task: class S ...

javascriptreactjs

The specified class is not found in the type 'ILineOptions' for fabricjs

Attempting to incorporate the solution provided in this answer for typescript, , regarding creating a Line. The code snippet from the answer includes the following options: var line = new fabric.Line(points, { strokeWidth: 2, fill: '#999999', ...

javascripttypescriptfabricjs

Click to expand for answers to commonly asked questions

Having trouble setting up a FAQs page on my blog and can't seem to get the code right. Check out what I'm trying to do here: http://jsfiddle.net/qwL33/ Everything seems fine but when I click on the first question, both questions open up. Can som ...

javascripttoggleslidedowntoggleclass

What is the abbreviated term for personalized elements in React Native development?

After discovering that custom components can be created like this: const CustomComp=()=>{ console.log('Created custom comp'); return(<View></View>); } export default function App(){ return(<View style={{flex:1}}> &l ...

javascriptreactjsreact-native

Transmitting client-side Javascript data to backend server using Express

I am trying to fetch data from my frontend using the DOM and send it to the backend through Express but I'm unsure of how to proceed. I have used a POST method to console.log the data, but now I need help retrieving it in my Express backend. (The cons ...

javascriptnode.jsexpress

Obtaining varied outcomes while printing filtered information

As a beginner in React.js using hooks, I prefer to learn through hands-on coding. My query revolves around fetching data from a specific URL like ksngfr.com/something.txt and displaying it as shown in the provided image (I only displayed numbers 1-4, but t ...

javascripthtmlreactjsreact-hooksfetch

Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here Below is the CSS-Styling + HTML code: .eleme ...

htmlcss

Using JQuery and JavaScript to store and dynamically apply functions

I have a code snippet that looks like this:. var nextSibling = $(this.parentNode).next(); I am interested in dynamically changing the next() function to prev(), based on a keypress event. (The context here is an input element within a table). Can someo ...

javascriptjqueryfunctionprototype

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

htmlnode.js

Using the value from the Vuex state to set the initial value for a different parameter

I am facing an issue with utilizing an array of objects in my Vuex state to set a default value for another parameter, specifically for mainAccount: For instance: const store = new Vuex.Store({ state: { AccountNums: [ { label: 'M ...

javascriptvue.jsvuex

Leveraging font as a comprehensive repository of icons

I have been experimenting with using entypo as the icon source for my web application. The UI technology I am working with is ZK. However, I encountered an issue when trying to include an icon from that font by using: <span sclass="entypoWhite">&am ...

cssfontszk

Guide to correctly passing custom parameters along with the event object to an asynchronous form submission handler

Asking for guidance on defining and typing custom parameters alongside the native event object in an async onSubmitHandler for a form. The current implementation only receives the native event as a single parameter: const onSubmitHandler: FormEventHa ...

javascriptreactjstypescript

Appending an empty <li> tag has no effect

I'm facing an issue with this loop where it always generates empty <li></li> tags. Can anyone help me understand why this is happening and suggest a solution? For reference, the loop runs 2 times (verified). function a(){ for (var i ...

javascriptjqueryhtml

Issue with Material UI select component not displaying the label text

I've been struggling with Material UI's "Select" for quite some time now - spent about 10 hours trying to make it work the way I want. Any help would be greatly appreciated. This question is connected to a previous one: Select MenuItem doesn' ...

javascriptreactjsmaterial-ui