JSFiddle - React, Tailwind, and code Playground

by RalphCSD

HTML

<div class="colBox">
		
		  <a href="#"><div class="colCon">
			
			  <h2 class="colHead">CUSHION COLLECTION</h2>
			
			    <div class="hover-div">
				
				    <div class="stuff">
        
					    <p class="colHeadLg">Cushions</p>
            
					    <p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
				
            </div>
			
				    <div class="stuff-hidden">
        
				      <p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
        
				    </div>
				
			    </div>
			
		    </div>
   
       </a>
		
	 </div>

CSS

.colBox {
  width: 100%; 
  max-width: 300px; 
  min-height: 400px; 
  background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg"); 
  right: 0px; 
  transition: all .5s ease-in-out; 
  -webkit-transition: all .5s ease-in-out;
  -webkit-backface-visibility: hidden;
  }
  
   .colCon {
     padding-top: 50px; 
     padding-left: 35px; 
     max-width: 200px; 
     color: white !important; 
     font-family: 'Montserrat', sans-serif;
     }
     
    .colHead {
      color: white !important; 
      font-weight: 400 !important; 
      font-size: 12px !important;
      }
      
    .colHeadLg {
      font-size:40px; 
      font-weight: 700; 
      padding-top:50px;
      }
      
    .colP {
      font-size: 12px; 
      line-height: 16px;
      }
      
    .moreArrow {
      font-size: 20px;
      }
      
      
      .colBox:hover {
        width: 100%; 
        max-width: 300px; 
        min-height: 400px; 
        background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");       -webkit-backface-visibility: hidden;
        }
        
      .hover-div {
        width:200px; 
        margin-top: 70px;
        }
        
      .hover-div .stuff {
        margin-top: 0; 
        position: relative; 
        width: 100%; 
        z-index:2; 
        -webkit-transition: margin-top 0.5s; 
        transition: margin-top 0.5s;
        }
        
      .hover-div .stuff-hidden {
        height:0; 
        width:100%; 
        overflow: hidden; 
        -webkit-transition: height 0.5s; 
        transition: height 0.5s;
        }
        
      .hover-div:hover .stuff {
        margin-top:-40px;
        }
        
      .hover-div:hover .stuff-hidden {
        height:40px;
        }