CODEWITHSUNDEEP
jquerycssfirefox
Prakash
Prakash

Reputation: 69

zoom effect in css is not working properly in firefox

I am trying to write code for zoom effect. I have 2 div one in other. I want to add zoom effect on other div and on inner div the zoom effect should not applied. For that on inner div I use "zoom:document". It is working fine on chrome, safari and opera. But it is not working on firefox. Here is the code :-

    <div style="border:#F00 solid 1px; width:50cm; float:left; height:30cm; background:#F00; zoom:0.5;-moz-transform:scale(0.5,0.5)">
 <div style="border:#0F0 solid 1px; background:#0F0; width:100px; height:50px; margin-left:300px; margin-top:300px; zoom:document">
 </div>
</div>

Thanks in advance for your suggestion.

Upvotes: 0

Views: 1788

Answers (2)

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

I have found that you have not given z-index. So i think you need to give z-index for firefox

Try to add

z-index:1000;

This should work. Thanks

Upvotes: 0

Ravi Chauhan
Ravi Chauhan

Reputation: 1458

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

The "supported: values are:

  • percentage - Scale by this percentage
  • number - Convert to percentage and scale - 1 == 100%; 1.5 == 150%;
  • normal - zoom: 1;

if any problem in mozilla then refer this link

https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform

-moz-transform: scale(2);

Upvotes: 1

Related Questions