anonym anonym - 2 years ago 101
HTML Question

:hover on img in firefox does't work

I,m trying to increase the width (scale) of the image of a button with :hover but it doesn't work on firefox (but it works on all others browsers).


<div class="my_class">
<button><img src="my_location.png" ></button>


div.my_class button img:hover{
transform: scale(1.3);
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-moz-transform: scale(1.3);


Do you see something wrong ?

Answer Source

The scale function takes two values, one for x and one for y. if you want to transform a single axis, only one argument is needed.

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);


Move the :hover to the button. Also, you should put the un-prefixed property after the prefixed ones.

div.my_class button:hover img {
  -webkit-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -moz-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);  
<div class="my_class">
  <button><img src="" ></button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download