zmiana zdjęć -firefox

Question

Mam problem z podmianą zdjęć (z szarego na zielony).Na chrome działa a na firefox juz nie.

http://codepen.io/asqan/pen/woGMYo

Answer 1

Rzuć okiem np tutaj:

• https://stackoverflow.com/questions/23079439/css-transition-doesnt-work-in-firefox
• https://stackoverflow.com/questions/28805220/css3-transform-not-working-on-firefox-why
• http://blog.cee.moe/why-css-transform-doesnt-work-on-inline-elements.html

 

Answer 2

Witam. Myślę, że powinieneś użyć obrazka jako tła elementu i wtedy zmieniać background lub dać dwa img i użyć właściwości  opacity dla drugiego obrazka i manipulować tą właściwością .

Comments

Img +pozycjonowanie absolutne (relative dla rodzica)dla obu img +opacity?

---

Nie potrzeba relative. Wystarczy img{position:absolute;} oraz opacity :1;dla widocznego zdjęcia na wierzchu  i opacity:0; po najechaniu na to zdjęcie czyli img:hover{opacity: 0;} z jakąś klasą dla odróżnienia jednego zdjęcia od drugiego.

Answer 3

Dziwne, że ten kod w ogóle działa. W pseudoklasie : hover nie ma właściwości content, występuje ona jedynie w pseudoelementach :before i :after. Poza tym jak chcesz to zrobić w css to jedynie podmiana background-image przy :hover. Jeśli chcesz zmienić atrybut src w <img> musisz użyć js.