CODEWITHSUNDEEP
htmlcssfirefoxhover
anonym
anonym

Reputation: 279

: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 ?

Upvotes: 1

Views: 176

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

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

Upvotes: 2

Related Questions