anonym anonym - 6 months ago 12
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).

HTML:

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


CSS:

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

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);

Update

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="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Britskorthaar-64091287828362D7bA.jpg/220px-Britskorthaar-64091287828362D7bA.jpg" ></button>
</div

Comments