I'm trying to create buttons with pixel art images to make a button for a browser game. I succeeded to put two images at the same position but when using .nav_button_activated:hover css code to make the top image transparent, hidden or with lower z-index value, I get what I want but the image quickly appears and disappear as I move the mouse over it. To describe it properly, the flashing effect stops when I stop the mouse on the picture, and the two pictures can be both at the time or on of them hidden. I tried different approaches using CSS only but with the flashing problem. I find my problem nowhere, can you help me please? If not possible with CSS, could you propose a fix with JavaScript?
I tried different techniques I found on Stackoverflow or elsewhere such as this nice example, or Show image over another image on hover but none of them solved the problem. The StackOverflow doesn't work actually. I should add that I work with pixelated picture and that I use the following code
.nav_bar img {
transform-origin: top left;
transform: scale(2); /* To increase the size of image, use transform: scale() */
/* remove anti-aliasing */
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor;
}
But It doesn't seems to create the problem.
My html code :
<div class='nav_button'>
<img src="./sprites/genome_button_selected.png"/>
<img class='nav_button_activated' src="./sprites/genome_button.png"/>
</div>
My CSS code (with flash effect I would like to understand and suppress) :
.nav_button {
position: relative;
float: right;
margin-right: 20px;
}
.nav_button img {
margin-right: 80px;
margin-left: 30px;
}
.nav_button_activated {
position: absolute;
top: 0px;
right: 0px;
}
.nav_button_activated:hover {
z-index: -99;
}
I just want to have a nice hover effect, seeing the illuminated title picture only when the mouse hovers it, with no flashing effect. Please, don't forget to explain the origin of the issue, so that I won't do it again.
