0

I have an image with 2 states: normal state with black and white and hover state with colors, in photoshop I've made 2 layers: background layer and top layer, I want the background layer to be shown as normal state and when hovering it shows the top layer. is there a way to apply the opacity CSS option just to the top layer? so as I can make it 0 in normal state and 1 in hover? or I need to make 2 images and show the second one instead of the first one in hover?

I've tried tiff extension which save the layers but when changing the opacity to 0 the image turns dark, that means the opacity is applied to all the layers.

ARDV
  • 3
  • 2

2 Answers2

1

You can do this without using two images. Instead use CSS filter to make the first image black&white.

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

img:hover {
  -webkit-filter: none;
  filter: none;
  transition: 0.66s
}
<img src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" width="300" height="300">
Ozgur Sar
  • 2,067
  • 2
  • 11
  • 23
  • Thank you very much, i've tried it and it works but its just greystyle, i need a pure dark and white image – ARDV Dec 09 '20 at 08:35
  • 1
    thank you very much. I've accepted it, and i hope to find another better solution. – ARDV Dec 09 '20 at 08:52
0

I've found this solution with JavaScript: the normal state file: 1.png the hover state file: 1.png.png

<img id="my-img" alt="" src="1.png"
onmouseover="hover(this);" onmouseout="unhover(this);" />
<script>
function hover(element) {
element.setAttribute('alt', element.src );
element.setAttribute('src', element.src  +'.png');
}

function unhover(element) {
element.setAttribute('src', element.alt);
}
</script>
ARDV
  • 3
  • 2