JSFiddle - React, Tailwind, and code Playground

HTML

</head>
 
 
 </header>
 <body>
 <div class="backg">
 <div class="main">
  	<div class="main_pix">
  <div class="pix"> 
  <div class="feedback">
  <p class="info">
 парам<br> парармм<br> тадам<br> 
  
     </p>
  </div>
   
  </div>
  <p>тадам</p>
    </div>
	
	

  	 </body>
  
</html>

CSS

body {
    margin:0px; 
    padding:0px;
	background:  white;
	}
	
    .backg {
    margin:0px; 
    padding:0px;
	background: url(http://i6.pixs.ru/storage/2/6/0/Kerch1png_2810655_11165260.png) no-repeat ;
	}

	.main {
	width: 1220px;
	max-width: 100%;
	min-width:820px;
    height: 100%;
	min-height: 1200px;
    margin:0 auto; 
    padding:0px;
	background: url(http://i6.pixs.ru/storage/6/0/1/Kerchback2_8241159_11180601.png) repeat ;
	} 
	.main_pix {
	width: 200px;
	height: 100%;
	background:  transparent;
	left: 340px; 
	top: 100px; 
	background: #3eb5f1;
	position: relative;
    display: inline-block;
	} 
	.main_pix p {
	color:white;
	margin-left:10px;
	} 
		.pix {
	width: 200px;
    height: 300px;
	margin: 0 auto; 
    padding:0px;
	background: url(http://i.pixs.ru/storage/2/6/8/pinpng_3665104_11249268.png) ;
	color: white;
	text-align: center;
	overflow: hidde;
	} 


  
  
  
  
  
  
     .feedback {
    width: 200px;
    background:  transparent; /* Цвет фона */
    color: white; /* Цвет текста */
    height: 0px; /* Минимальная высота */
    top: 0px; 
    padding-top: 300px;
    transition: top 0.3s; /* Анимация */
	position: relative;
    overflow: hidden;
	}
    p.info {
	color:white;
	text-align: center;
	background: url(http://i6.pixs.ru/storage/0/5/8/backpng_4913310_11250058.png);
	padding: 5px;
	margin: 0px;
	} 
   .feedback:hover {
    height: 200px;
    top: -70px; /* При наведении сдвигаем вправо */
   }