JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="flex">
  <div class="item">
    <div class="screen">
     <div class="words">Option 1
      <div>
        This option is best for beginners and has easy to follow instructions.
      </div>
</div>
    </div>
    <img src="https://www.hloe.co.uk/sample.jpg" />
  </div>
  <div class="item">
    <div class="screen">
     <div class="words">Option 2
      <div>
        This option is best for beginners and has easy to follow instructions.
      </div>
</div>
    </div>
    <img src="https://www.hloe.co.uk/sample2.jpg" />
  </div>
  <div class="item">
    <div class="screen">
     <div class="words">Option 3
      <div>
        This option is best for beginners and has easy to follow instructions.
      </div>
</div>
    </div>
    <img src="https://www.hloe.co.uk/sample3.jpg" />
  </div>
  <div class="item">
    <div class="screen">
     <div class="words">Option 4
      <div>
        This option is best for beginners and has easy to follow instructions.
      </div>
</div>
    </div>
    <img src="https://www.hloe.co.uk/sample4.jpg" />
  </div>
</div>

<div class="next_arrow">Part 2: </div>

CSS

.flex {display:flex;max-width:1200px;margin:auto;aspect-ratio:4/1;}
.item {flex: 1 1 auto;width:25%;transition:all 0.5s ease;cursor:pointer;position: relative;overflow: hidden;}
.item img {object-fit:cover;width:100%;height:100%;position: absolute;top: 0;left: 0;object-position: center;z-index: -1;}
.item:hover {width:40%;transition:all 0.5s ease;}

.screen {padding:20px;box-sizing: border-box;display: flex;flex-direction: column;text-align:center;width:100%;height:100%;transition:all 0.5s ease;
align-items: center;justify-content: center;background-image: linear-gradient(to right,rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));}

.words {color:#ffffff;font-size:24px;font-weight:700;font-family:Arial;position:relative;width:100%;margin-top:0;transition:all 0.5s ease;}
.words div {font-size:16px;font-weight:normal;font-family:Arial;display:block;max-width:260px;
margin:10px auto 0 -130px;opacity:0;transition:all 0.5s ease;position:absolute;top:100%;left:50%;}

.item:hover .screen div {opacity:1;transition:all 0.5s ease;}
.item:hover .words {margin-top:-40px;transition:all 0.5s ease;}


@media (max-width: 1000px) {
.flex {display:flex;max-width:800px;margin:auto;aspect-ratio:1/1;flex-wrap: wrap;}
.item {width:50%;transition-property: none;}
.item:hover {width:50%;transition-property: none;}

.item:hover .screen div {opacity:1;transition-property: none;}
.item:hover .screen {padding-bottom:20%;transition-property: none;}

.item .screen div {opacity:1;transition-property: none;}
.item .screen {padding-bottom:20%;transition-property: none;}

}

@media (max-width: 480px) {
.flex {display:flex;max-width:400px;margin:auto;aspect-ratio:1/4;flex-wrap: wrap;}
.item {width:100%;transition-property: none;}
.item:hover {width:100%;transition-property: none;}

}

.next_arrow {background-color:#73a642;color:#ffffff;padding:15px;clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);}