JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="holder holder--hover">
  <div class="show">
    <div>
      <img src="http://lorempixel.com/200/200/" alt="">

    </div>
  </div>
  <div class="tell">
    <h2>Hello There</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod accusamus enim ipsum veniam</p>
  </div>
</div>

<div class="holder holder--hover">
  <div class="show">
    <div>
      <img src="http://lorempixel.com/200/200/" alt="">

    </div>
  </div>
  <div class="tell">
    <h2>Hello There</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod accusamus enim ipsum veniam</p>
  </div>
</div>

<div class="holder holder--hover">
  <div class="show">
    <div>
      <img src="http://lorempixel.com/200/200/" alt="">

    </div>
  </div>
  <div class="tell">
    <h2>Hello There</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod accusamus enim ipsum veniam</p>
  </div>
</div>

<div class="holder holder--hover">
  <div class="show">
    <div>
      <img src="http://lorempixel.com/200/200/" alt="">

    </div>
  </div>
  <div class="tell">
    <h2>Hello There</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod accusamus enim ipsum veniam</p>
  </div>
</div>

SCSS

body {
  background: white;
}

div.holder {
  width: 46%;
  margin: 2%;
  float: left;
  background: #fff;
  display: flex;
  transition: all 0.4s linear;
  position: relative;
  max-height: 300px;
  overflow: visible;
  
  &::nth-child(even) {
    margin-right: 0;
  }
  
  .show {
    
  
    width: 50%;
    display: flex;
    transition: all 0.4s linear;
    flex: 1 1 auto;
    align-items: center;
    div {
      width: 100%;
    }
    img {
      display: block !important;
      height: auto;
      max-width: 100%;
      transition: all 0.4s linear;
      transform: translateX(50%);
    }
  }
  .tell {
    width: 50%;
    opacity: 0;
    transition: all 0.4s linear;
    transform: translateX(50%);
    overflow: visible;
  }
  &:hover {
    .show {
      width: 30%;
      text-align: center;
      div {
        text-align: right;
      }
      img {
        transform: scale(0.8);
        translateX(0%);
      }
    }
    .tell {
      opacity: 1;
      transform: translateX(0);
      overflow: visible;
    }
  }
}

@media screen and (max-width: 500px) {
  .holder {
    
   overflow:hidden !important;
  
    .show {
      width: 100% !important;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      div {
        height: 100% !important ;
      }
      img {
        /* width: auto; */
        transform: translateX(0px) !important;
        width: auto !important;
        min-height: 100% !important;
        min-width: 110% !important;
        display: block !important;
        max-width: none !important;
      }
    }
    .tell {
      overflow: hidden;
      width: 100% !important;
      padding: 1em;
    }
    &:hover {
      .show {
        img {
          transform: scale(1.1) !important;
          opacity: 0.04;
        }
      }
      .tell {
        width: 100%;
      }
    }
  }
}