JSFiddle - React, Tailwind, and code Playground

HTML

<section id="pictures">
		<div id="tv">
			<img class="tvone" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
			<img class="tvtwo" src="https://c.radikal.ru/c02/1801/20/0c59372690c5.png">
			<div class="blocktext">
			<p class="textpicturesheader">Lorem Ipsum is</p>
			<p class="textpictures">Lorem Ipsum is simply dummy text of the printing</p>
			<p class="textpictures">and typesetting of the industry. Lorem</p>
			<p class="textpictures">Ipsum has been</p>
			</div>
		</div>

	</section>

CSS

#pictures {
	width:1366px;
	height: 385px;
	display: inline-block;
	line-height: 385px;
}

#tv{
	display: inline-block;
	width: 300px;
	max-height: 385px;
	line-height: 112px;
	margin-top: 50px;
	margin-left: 193px;
	border: 1px solid red;
	box-sizing: border-box;
}

#tv:hover .tvone {
  display:none;
}
#tv:hover .tvtwo {
  display:block;
}
.tvone {
	display: inline-block;
	vertical-align: top;
	margin-left: 70px;
}

.tvtwo{
	display: inline-block;
	vertical-align: top;
	margin-left: 70px;
	display: none;
}

.blocktext{
	display:inline-block;
	text-align: center;
	background:red;
	vertical-align: top;
	width: 300px;
	max-height: 300px;
}

.textpictures {
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-family: PTSans;
	font-weight: Regular;
	color: #818181;
}
.textpicturesheader{
	display: block;
	font-size: 20px;
	line-height: 40px;
	font-family: OpenSansBold;
	font-weight: bold;
	color: #818181;
}