JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="photo-container">
  <div class="inner">
    <div class="text-wrap">
      <h1>company</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <img src="https://images.unsplash.com/photo-1588641657136-a2b97ca9512a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODJ8fGNvbW1lcmNpYWwlMjB1c2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60" alt="">
    
  </div>
</div>

SCSS

.photo-container {
  overflow: hidden;
  border: 2px solid #000000;
  margin: 50px;
  /* pointer-events: none; */
  .inner {
    position: relative;
    display: grid;
    place-items: center;
    transition: transform 0.6s ease;
    > * {
      grid-area: 1 / 1 / -1 / -1;
      color: #ffffff;
      text-align: center;
    }
  }
  .inner {
    /* pointer-events: auto; */
    
    &:hover {
      
      img {
        transform: scale(1.3);
      }
      .text-wrap {
        /* pointer-events: none; */
      }
    }
    
  }
  img {
    position: relative;
    z-index: -1;
    width: 100%;
  }
  .text-wrap {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; */
  }
  h1 {
    font-size: 40px;
  }
  p {
    font-size: 26px;
  }
}