Здравствуйте. Мне бы хотелось, чтобы надпись спанч боб на картинке менялась, когда появляется патрик, как это сделать?

Подскажите, пожалуйста. Что добавить, чтобы красная надпись на Патрике изменялась (т. е Спанч Боб (красным) стало НЕТ, ЭТО ПАТРИК (розовым) (как пример)) при наведении на квадрат и также выполняла свои функции, как и прежде.
CSS ФАЙЛ

_____________

Body {
display: flex;
justify-content: space-between
}

.front {
background-image: url(8ae510a2cd5493b409b45771b0fc6312.jpg);
height: 500px;
width: 500px;
margin: 0 auto;
color: black;
font-size: 40px;
border: 3px solid yellow;
border-radius: 25%;
text-align: center
}

.front:hover {
background-image: url(5c93328cabfb8f44c5469a10b9323bab.jpg);
color: rgb(blueviolet);
font-size: 40px;
color: red;
transform: rotate(45deg);
border: 3px solid blue;
margin-top: 50px;
}

.front,
.front:hover {
float: left;
transition: all 0.5s;
}

.block2 {
background-color: rgb(17, 116, 17);
height: 500px;
width: 500px;
border: 7px dotted black;
font-size: 350px;
border-radius: 50%;
text-align: center
}

.block2:hover {
background-color: rgb(255, 255, 0);
color: rgb(0, 17, 255);
transform: rotate(45deg);
margin-top: 50px;
}

HTML
_______

Спанч боб

css

Вот HTML файл, по-другому не кидается