JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	

	<div class="wrapper">
		
		<div class="text-content">
			<div class="text-content-items">
				<p id="samoyed">House</p>
				<p id="labrador">Car</p>
				<p id="candles">Candles</p>
			</div>
		</div>

		<div class="image-content">
			<div class="img-of-dog">
				
			</div>
		</div>

	</div>



	<script src="app.js"></script>
	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Open Sans', sans-serif;
}
.wrapper{
	border: 1px solid black;
	height: 350px;
	width: 800px;
	display: flex;
}

.text-content{
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.text-content p{
	font-size: 25px;
	margin: 35px 0;
	text-align: center;
    color: #161616; /* Цвет обычной ссылки */
    line-height: 1;
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer;
}
.text-content p:after{
	background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
    display: block;
    content: "";
    height: 2px; /* Высота линии */
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.text-content p:hover:after,
.text-content p:focus:after{
	width: 100%;
}
.text-content-items{
}

.image-content{
	width: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img-of-dog{
	background-image: url('https://images.unsplash.com/photo-1569878766010-17bff0a1987d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80');
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	height: 300px;
	width: 500px;
	transition: 1s;
}

JavaScript

const car = "url('https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80')"
const house = "url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1175&q=80')"
const candles = "url('https://images.unsplash.com/photo-1593542468714-ac3ba4b38d43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80')"
const data = [
car,
house,
candles,
]

function changeBackgroundImages(array, current = 0) {
	const samoyed = document.querySelector('#samoyed')
	const labrador = document.querySelector('#labrador')
	const bgImage = document.querySelector('.img-of-dog')
	var a = 2000
	let is_paused = false;

	const changeTimeset = setTimeout(()=>{
		if (is_paused) return;
		bgImage.style.backgroundImage = array[current]
		
		changeBackgroundImages(data, ++current % array.length)
	}, a)

	function chandgeBackgroundImageOnMouse() {
		samoyed.addEventListener("mouseover", ()=>{
			bgImage.style.backgroundImage = house
			is_paused = true
	})
		samoyed.addEventListener("mouseleave", ()=>{
			is_paused = false
		})
	}
	chandgeBackgroundImageOnMouse()
}

changeBackgroundImages(data)