title: how can I put an element always in top on a image with transform property
body: <p>so I'm trying to make a &quot;like&quot; button, but my images have a transform property on hover, and this make my like button go to behind the image.</p>
  <p>when I'm not hovering:</p>
  <p><a href="https://i.stack.imgur.com/VsNnS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VsNnS.png" alt="image1" /></a></p>
  <p>when I'm hovering:</p>
  <p><a href="https://i.stack.imgur.com/sIyel.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sIyel.png" alt="image2" /></a></p>
  <p>My css code using styled components:</p>
  <pre><code>const Container = styled.div `
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-top: 5px;
  
    .heart {
      position: absolute;
      color: #FF4040;
      transition: opacity 0.2s;
      border: none;
      padding-top: 15px;
      padding-left: 15px;
      transition: 0.3s;
    }
      img{
          flex:1;
          width: 165px;
          height: 220px;
          transition: 0.3s;
          
        }
      .heart:hover {
          transform: scale(1.1);
      }
      img:hover {
          transform: scale(1.1);
          opacity:0.4;
          position: sticky;
      }
    }
  
  `;
  
  
  export default Container;
  </code></pre>