Css of li element need to change

Question

I am working on a website and I used zoom property of CSS for minimizing image size.

The below mentioned image was that I wanted to achieve

enter image description here

and I did achieved it by using CSS:-

.nav-pills > li > a > img {
    zoom:35%;
}

But the zoom does not worked in Firefox so I used the following code and got the following css

enter image description here

.nav-pills > li > a > img {
    border: 4px solid #5a827f;
    border-radius: 25px;
    background: white;
    padding: 20px; 
    margin-bottom: 15px;
}

Thus the image gets distorted. Can someone please tell me how to fix it. My HTML structure is :- i.e. I have HTML as :-

ul class="nav-pills" > li > a > i

<ul class="nav nav-pills nav-justified">
    <li ng-class="{active: $index == 0}" ng-repeat="tab in tabs">
        <a data-target="#tab{{$index + 1}}" data-toggle="tab" class="thumbnail"><img ng-src="{{tab.image}}" alt="" />{{tab.title}}</a>
    </li>
</ul>

Please note I want my code to be functioning in Chrome and firefox and all other browsers

Possible duplicate of [How can I zoom an HTML element in Firefox and Opera?](http://stackoverflow.com/questions/4049342/how-can-i-zoom-an-html-element-in-firefox-and-opera) — claudios, Oct 13 '16 at 04:58

score 0 · Answer 1 · edited Oct 13 '16 at 08:12

0

For Firefox try this:

-moz-transform: scale(2);

edited Oct 13 '16 at 08:12

Al Foиce ѫ

4,195
12
39
49

answered Oct 13 '16 at 04:49

Matt Picca

142
11

Asifuzzaman Redoy · Answer 2 · 2016-10-13T05:03:23.110

Hello I hope below code helps you .You can customize this according to your own I just did the basic

.nav-pills > li > a > img:hover {
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -o-transform: scale(1.5);
   -ms-transform: scale(1.5);
   transform: scale(1.5);
}

  <ul class="nav nav-pills nav-justified">
     <li>
        <a href="#" rel="p1"  class="thumbnail">
          <img src="mm.jpg" 
           width="55" height="60" alt=""/>                        
        </a>
     </li>
                 
  </ul>

Sumit patel · Answer 3 · 2016-10-13T05:05:27.610

Try This active class add in second image in Snippet Example.update Css

Without Img Hover

ul
{
  list-style-type:none;
}
.nav-pills > li > a > img {

border: 4px solid #5a827f;
border-radius: 25px;
background: white;
padding: 20px; 
margin-bottom: 15px;
float:left;
}
.nav-pills > li > a > img {
zoom:35%;
}
.nav-pills > li > a.active > img
{
  border-bottom: 15px solid black;
   margin-bottom: 0px;
   -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<ul class="nav nav-pills nav-justified">
    <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>    <li >
        <a  data-toggle="tab" class="thumbnail active"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
        <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
        <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
</ul>

With Image Hover

ul
{
  list-style-type:none;
}
.nav-pills > li > a > img {

    border: 4px solid #5a827f;
    border-radius: 25px;
    background: white;
    padding: 20px; 
    margin-bottom: 15px;
    float:left;
}
.nav-pills > li > a > img {
zoom:35%;
}
.nav-pills > li > a > img:hover
{
  border-bottom: 15px solid black;
   margin-bottom: 0px;
   -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<ul class="nav nav-pills nav-justified">
    <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>    <li >
        <a  data-toggle="tab" class="thumbnail active"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
        <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
        <li >
        <a  data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a>
    </li>
</ul>

Thanks Sumit, This works well in Chrome / Edge / Safari . But the problem still persists in firefox. Can you update for firefox if possible — user31823, Oct 13 '16 at 23:34
Its still showing the same problem in firefox and the error is given in the 2nd snapshot of my question above — user31823, Oct 13 '16 at 23:38

Css of li element need to change

3 Answers3