title: how to zoom in an image without increasing its size?
body: <p>I want to get a zoom effect on the image but without increasing its size on the screen, I was able to use "transform: scale ()" for the image to get a sort of zoom, but I do not want the space it occupies increases, which is what happens when I increase the scale ().</p>
  
  <p>How can I get this? The current effect I've achieved is on my testing site and in the future will be a blog / portfolio: <a href="http://marcosroot.pythonanywhere.com/blog/" rel="noreferrer">http://marcosroot.pythonanywhere.com/blog/</a></p>
  
  <p>The effect happens with hover in the image.</p>
  
  <p>PS: the code looks like this:</p>
  
  <pre><code>&amp;__media {
      transition: transform .25s ease-in-out;
  
      &amp;:hover {
          transform: scale(1.025);
      }
  }
  </code></pre>