How to make textcontent dissapear on hover using only css?

I had to generate 6 random colors and show the rgb and hex code with texcontent on each rectangles using javascript. that part is done. now i have to make them appear only on hover. i am having difficulties. i have been told it is possible to do it using only CSS. I am beginner so if possible to help me using the easiest way possible… thanks

function decimalToHex(decimalNumber){
let hexadecimalNumber = decimalNumber.toString(16);

if(hexadecimalNumber.length === 1){
    return '0' + hexadecimalNumber;
}

return hexadecimalNumber;
}

let allSquares = document.querySelectorAll('.square');
let randomColorOne = document.querySelector('.square--one');
let randomColorTwo = document.querySelector('.square--two');
let randomColorThree = document.querySelector('.square--three');
let randomColorFour = document.querySelector('.square--four');
let randomColorFive = document.querySelector('.square--five');
let randomColorSix = document.querySelector('.square--six');
let btnRandom = document.querySelector('.btn--random');


function getColors(){
let red = Math.round (Math.random() * 255);
let green = Math.round (Math.random() * 255);
let blue = Math.round(Math.random()*255);
let redHexa = decimalToHex(red);
let greenHexa = decimalToHex(green);
let blueHexa = decimalToHex(blue);
let fullRgbColor = 'rgb('+ red +', ' + green + ', ' + blue +')';
let fullHexaColor = '#' + redHexa + greenHexa + blueHexa;


return [fullRgbColor, fullHexaColor];
}

btnRandom.addEventListener('click', () => {
for(let square of allSquares){
    let colors = getColors ();
    console.log(colors [0]);
    square.style.backgroundColor = colors[0];
    square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}
});

for(let square of allSquares){
let colors = getColors();
square.style.backgroundColor = colors[0];
square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}

.square{
height: 900px;
width: 500px;
background-color: black;
border: 5px solid white;;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.btn--random{
width: 10%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: 20px;
margin-left: 45%;
font-size: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: darkcyan;
cursor: pointer;
}


.square{
color: transparent;
}

.square:hover{

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<script src="app.js" defer></script>
<title>Document</title>
</head>
<body>
<header>
    <h1>Générateur de couleurs</h1>
</header>
<h2>Appuyez sur le bouton pour générer vos couleurs.</h2>
<main class="main_container">
    <div class="square square--one hover"></div>
    <div class="square square--two hover"></div>
    <div class="square square--three hover"></div>
    <div class="square square--four hover"></div>
    <div class="square square--five hover"></div>
    <div class="square square--six hover"></div>
</main>
<button class="btn--random">RANDOM</button>
</body>
</html>