Fazer um transition ao usar mouseover e mouseout

[BHAMF]

Eu queria aplicar uma transição neste código aqui

<script type="text/javascript">					
					whatsappImageDiv = document.querySelector('.whatsappDiv');
					whatsappImageDiv.addEventListener('mouseover', mouseEntrou);
					whatsappImageDiv.addEventListener('mouseout', mouseSaiu);

					whatsappImage = document.querySelector('.icon-whatsapp');

					textoCont = document.querySelector('.textoAlt');

					function mouseEntrou() {
						
						textoCont.classList.remove('displayNone');						
						whatsappImage.classList.remove('displayBlock');

						textoCont.classList.add('displayBlock');
						whatsappImage.classList.add('displayNone');
                      
						console.log('entrou');
					}
					function mouseSaiu() {						
						textoCont.classList.remove('displayBlock');						
						whatsappImage.classList.remove('displayNone');

						textoCont.classList.add('displayNone');
						whatsappImage.classList.add('displayBlock');
						console.log('saiu');
					}
				</script>

Que tem o seguinte HTML:

<section class="secContato">
		<div class="flexContact">
			<div class="quadrado1Contact">
				<h3 class="descContato">Deseja fazer uma tattoo? Vai no nosso Whatsapp e troca uma ideia com a gente sobre a tattoo ;) Não esquece de dá uma conferida no horario de atendimento também, ok?</h3>
				
				<a class="a" href=""><div class="whatsappDiv">
					<h2 id="textoAlt" class="textoAlt">Clique aqui para ir para o Whatsapp!</h2>
					<p class="icon-whatsapp"></p>
				</div></a>
				
				

				<script type="text/javascript">					
					<...> //nosso script
				</script>
				
			</div>
			<div class="quadrado2Contact">
				<...> //uma segunda div que não precisa ser comentada
			</div>
			<div class="clear2"></div>

		</div>
	</section>

Eu poderia fazer com CSS aplicando ao invés de um IMG no código, uma DIV com um background com aquela imagem e daí sim, quando :hover, eu fazia aparecer o nome dentro da DIV. Mas eu queria saber se tem como fazer isso em Javascript, já que o código em JS está todo pronto e está faltando apenas a transição... Vocês poderiam me ajudar? Obrigado desde já! Espero respostas ^^

[BHAMF]

Agora, BHAMF disse:

Eu queria aplicar uma transição neste código aqui

<script type="text/javascript">					
					whatsappImageDiv = document.querySelector('.whatsappDiv');
					whatsappImageDiv.addEventListener('mouseover', mouseEntrou);
					whatsappImageDiv.addEventListener('mouseout', mouseSaiu);

					whatsappImage = document.querySelector('.icon-whatsapp');

					textoCont = document.querySelector('.textoAlt');

					function mouseEntrou() {
						
						textoCont.classList.remove('displayNone');						
						whatsappImage.classList.remove('displayBlock');

						textoCont.classList.add('displayBlock');
						whatsappImage.classList.add('displayNone');
                      
						console.log('entrou');
					}
					function mouseSaiu() {						
						textoCont.classList.remove('displayBlock');						
						whatsappImage.classList.remove('displayNone');

						textoCont.classList.add('displayNone');
						whatsappImage.classList.add('displayBlock');
						console.log('saiu');
					}
				</script>

Que tem o seguinte HTML:

<section class="secContato">
		<div class="flexContact">
			<div class="quadrado1Contact">
				<h3 class="descContato">Deseja fazer uma tattoo? Vai no nosso Whatsapp e troca uma ideia com a gente sobre a tattoo ;) Não esquece de dá uma conferida no horario de atendimento também, ok?</h3>
				
				<a class="a" href=""><div class="whatsappDiv">
					<h2 id="textoAlt" class="textoAlt">Clique aqui para ir para o Whatsapp!</h2>
					<p class="icon-whatsapp"></p>
				</div></a>
				
				

				<script type="text/javascript">					
					<...> //nosso script
				</script>
				
			</div>
			<div class="quadrado2Contact">
				<...> //uma segunda div que não precisa ser comentada
			</div>
			<div class="clear2"></div>

		</div>
	</section>

Eu poderia fazer com CSS aplicando ao invés de um IMG no código, uma DIV com um background com aquela imagem e daí sim, quando :hover, eu fazia aparecer o nome dentro da DIV. Mas eu queria saber se tem como fazer isso em Javascript, já que o código em JS está todo pronto e está faltando apenas a transição... Vocês poderiam me ajudar? Obrigado desde já! Espero respostas ^^

Um adendo ao meu tópico, é que já tentei inserir um transition nas referidas classes css e não funciona de jeito nenhum. Ele simplesmente aparece e reaparece sem nenhuma transição. Antes eu estava fazendo com o simples código de .document,style.display = 'none' e vice versa. Tentei ao invés disso, adicionar as classes pra ver se funcionava mas não funcionou. Então, se você pensou em responder assim, saiba que tem de ser de outra maneira