How to scale inside a div without expanding the div itself on mozilla browser?

Question

I'm using scale function so when I hover the div the image and text inside it grow. On chrome browser it works perfectly but on mozilla the div grow too. How can I fix that ? I never had to fix browser compatibility problems before so I don't know where to start.

<div class="zoom-in">
    <a href="#">
        <img src="https://via.placeholder.com/150">
    </a>
    <h2><a href="#"><span>My Text</a></h2>
</div>

.zoom-in {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease ;
    -ms-transition: all 0.2s ease ;
    -o-transition: all 0.2s ease ;
    transition: all 0.2s ease ;
}
.zoom-in:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

SOLUTION : Finally I decided to use specific CSS code for mozilla browser only

.zoom-in {
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease ;
    -o-transition: all 0.2s ease ;
    transition: all 0.2s ease ;
    &:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}
// Mozilla browser only
@-moz-document url-prefix() {
    .zoom-in {
        max-width: -moz-fit-content;
        &:hover {
            transform: none;
        }
        &:hover img,
        &:hover h2 {
            -moz-transition: all 0.2s ease ;
            -moz-transform: scale(1.1);
        }
    }
}

Sai Manoj · Answer 1 · 2019-06-27T10:12:32.123

0

Instead of scale on div you need to apply scale on img when hovering

.zoom-in {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  max-width:fit-content
}

.zoom-in:hover img,
.zoom-in:hover h2 {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  transform-origin: 0 0;
}

<div class="zoom-in">
  <img src="https://via.placeholder.com/150" alt="img">
  <h2><a href="#" class="text">My Text</a></h2>
</div>

edited Jun 27 '19 at 10:12

answered Jun 27 '19 at 09:21

Sai Manoj

3,139
1
8
30

I edited my code because I have text and an image and I want both to scale inside the div. Your solution works only if I have an img and if I set a max-width to the div too. – Nicolas Twil Jun 27 '19 at 09:42
@NicolasTwil Updated the answer. you can use `transform-origin: 0 0;` – Sai Manoj Jun 27 '19 at 10:05
Please up-vote and accept my answer if it helped you @NicolasTwil – Sai Manoj Jun 27 '19 at 10:14
Finally I wrote specific code for mozilla browser otherwise I couldn't get both browser to work with the same code – Nicolas Twil Jun 27 '19 at 13:18

How to scale inside a div without expanding the div itself on mozilla browser?

1 Answers1