CODEWITHSUNDEEP
javascripthtmlcss
KD_dev
KD_dev

Reputation: 25

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, but for it to stop when the mouse is still,

While the mouse is stationary, color doesn't change,

While the mouse is moving, color changes.

I know there is the hover attribute in CSS, but it only has 2 states, when the mouse is hovering over it, and when it is not, what i'm looking for is something a bit trickier.

Hopefully that explains it :/

Upvotes: 0

Views: 3105

Answers (3)

Ashiq
Ashiq

Reputation: 11

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

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

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>
    <img src="https://unsplash.it/500/500/?random">
</figure>

Upvotes: 2

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

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;
}
<div id="myDiv">Hover ME !</div>

Upvotes: 3

Related Questions