CSS, Once hovered keep changes

Question

I am using CSS for a nice overflow effect.

So if I hover an image it fades to another images with this code:

#image{
margin: 0 auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
height: 400px;
background-image: url('xerath.png');
-o-transition:color .1s ease-out, background 1s ease-in;
-ms-transition:color .1s ease-out, background 1s ease-in;
-moz-transition:color .1s ease-out, background 1s ease-in;
-webkit-transition:color .1s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .1s ease-out, background 1s ease-in;
}

#image:hover{
background-image: url('riven.png');
}

But now if I hover the image it changes, when i turn my mouse off the image it changes back, I don't want it to change back.

How can i fix this?

I don't think this is possible with CSS alone. You'll need some JS. — user247702, Jul 26 '14 at 11:56
http://jsfiddle.net/8ZuEC/ There it is, if you move your mouse fast over the image you see its a little bit buggy i dont want that :D — Chiel, Jul 26 '14 at 11:58
Yeah i know, but i cant write JS so can someone help me out so it doesnt buggy :? — Chiel, Jul 26 '14 at 12:05
You can do a inline coding with javascript(library) using the following elements it gives much more control onmouseover, onmouseout, onmousedown, onmouseup — Vivo, Jul 26 '14 at 12:31

score 2 · Answer 1 · answered Jul 26 '14 at 12:19

2

There are two possible solutions.

CSS only

Move your transitions to the :hover and add

-webkit-transition-duration:10000s;
   -moz-transition-duration:10000s;
    -ms-transition-duration:10000s;
     -o-transition-duration:10000s;
        transition-duration:10000s;

to #image. This makes the image transition back so slowly that it appears like the image keeps the changes.

Demo

With JavaScript

Add an event listener for mouseover to the image and apply a class to #image which keeps the changes.

JavaScript

document.querySelector("#image").addEventListener("mouseover",function() {
    this.classList.add("transitioned");
});

CSS

#image.transitioned {
    background-image: url('http://g2f.nl/07vbp18');
}

See Fiddle

answered Jul 26 '14 at 12:19

SVSchmidt

6,269
2
26
37

That second with JS works really nice! But i want when i put my mouse on it again it changes back, is that possible somehow? – Chiel Jul 26 '14 at 12:45
http://jsfiddle.net/Whre/zadTY/4/ :) – SVSchmidt Jul 26 '14 at 13:14
But now its buggy if you mover your mouse really fast over it – Chiel Jul 26 '14 at 13:47
Someone that knows how to fix the buggy thing? Because when you move your mouse quick over it it buggs. Or is it maybe possible to change the background-image of the div every 5 seconds or something? – Chiel Jul 26 '14 at 18:23
This one should work: http://jsfiddle.net/Whre/zadTY/6/ But I don't know if it's the best solution possible. If everyone has a better idea, please let me know! – SVSchmidt Jul 26 '14 at 20:09

CSS, Once hovered keep changes

1 Answers1