How To Make Image Change Color While Mouse Is Moving Over?

First off, sorry for the weird title, I don't really know a better way of describing it. Basically I want the image to change color while the mouse is moving (hovering) over it, bu

Solution 1:

Please try this:

document.getElementById("myDiv").onmousemove = function() {
  //Set random background color
  myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}

Demo:

document.getElementById("myDiv").onmousemove = function() {
  //Set random background color
  myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}

#myDiv {
  width: 150px;
  height: 150px;
  background-color: #ccc;
  text-align: center;
  line-height: 140px;
}

<divid="myDiv">Hover ME !</div>

Solution 2:

You can achieve this with CSS animations, using Javascript to toggle a class when the mouse moves over the image, or stops doing so.

The image will need to be wrapped within another tag, if it isn't already, and then a pseudo-element will need to be added to that tag, positioned to sit directly on top of the image, with an initial opacity of 0. We ensure the image is visible behind the pseudo-element by setting the mix-blend-mode property of the latter. When the mouse first moves over the image it is, optionally, converted to grayscale and the background-color of the pseudo-element begins animating. When the mouse stops moving, the timeout in the JavaScript adds a class to the parent element which sets the animation-play-state property of the pseudo-element to paused and, when the mouse is moved again, this class is removed.

You can refine & tweak everything in this (e.g., removing the image's filter, adding/removing keyframes, chaning the mix-blend-mode, adjusting the animation-duration) just by editing the CSS, no need to touch the JavaScript.

var figure=document.querySelector("figure"),
    img=figure.querySelector("img"),
    timer;
img.addEventListener("mousemove",function(){
    clearTimeout(timer);
    figure.classList.remove("paused");
    setTimeout(function(){
        figure.classList.add("paused");
    },300);
},0);

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
    transition:-webkit-filter .25s linear 99999s,filter .25s linear 99999s;
}
img:hover{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
    transition-delay:0s;
}
figure::after{
    animation:colours 5s linear infinite;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:0;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
    transition:opacity .25s linear 99999s;
}
figure:hover::after{
    opacity:.75;
    transition-delay:0s;
}
figure.paused::after{
    animation-play-state:paused;
}
@keyframes colours{
    0%{background:#f00;}
    16.667%{background:#ff0;}
    33.333%{background:#0f0;}
    50%{background:#0ff;}
    66.667%{background:#00f;}
    83.333%{background:#f0f;}
    100%{background:#f00;}
}

<figure><imgsrc="https://unsplash.it/500/500/?random"></figure>

Solution 3:

I'm posting here as I need almost something like this. I need to change the back ground position on each mouse move. Image is set as background, here is the image:

http://pbdlbd.org/ipositive/wp-content/uploads/2015/02/one10.jpg

And I want to move the background position on each mouse move. This image has 4 parts(height of each part is 523px) and first it will show the top portion and after mouse move over it will show the 2nd portion and on another mouse move it will show 3rd portion and after 4th part it will repeat for further mouse move over it. After mouse is removed from the image, it will show the default top portion of the image.

Something like this:

document.getElementById("#ipos .flex_cell").onmousemove = function() {
  //Set background position 523px bottom on each mouse move#ipos .flex_cell.style.background-position = center -523px (here i can't make it so that it changes to -1046px by code);
}

Here is the site

TIA