Change background on hovering div in CSS

Question

I have some divs that when you hover them I would like to change the background.

At first my background is hidden, and when you hover something like this should happen, with a text in the background, like this:

Here is what I could do so far but I have trouble with the css or the html structure:

.first-background {
    height: 100vh;
    width: 100vw;
    background-color: black;
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

h1 {
    font-size: 10em;
    color: white;
}

.first {
    height: 20px;
    width: 20px;
    background-color: blue;
}

.first:hover .first-background {
    visibility: visible;
    opacity: 1;
}

<div class="first-background">
        <h1>FIRST</h1>
    </div>


    <div class="container">
        <div class="col-md-12">
            <div class="section col-md-4 col-xs-12">
                <div class="first">
                    <div class="content">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

What you can do is target the Next Sibling element using + (or ~)

*{margin:0;box-sizing:border-box;}

/* some common styles */
#wrapper{
  position: relative;
}
#box{
  position: absolute;
  z-index:1; /* overlap #content */
  top: 20px;
  left: 20px;
  width: 20px;
  height: 20px;
  background: #0bf;
  cursor: pointer;
}
#content{
  background: #ddd;
  color: #fff;
  padding: 70px;
  /* we'll transition opacity */
  opacity: 0;
  transition: 0.3s;
}

/* the magic here */
#box:hover + #content{
  opacity: 1;
}

<div id="wrapper">

  <div id="box"></div>
  
  <div id="content">
    <h1>SECOND THIS!</h1>
  </div>
  
</div>

Answer 2

To do something like that, you need to use onmouseover in your html tag. I did a simple example to try to show you how to do it.

function changebg(){
  document.getElementById("cont").style.background = "url('https://image.freepik.com/free-vector/purple-background-of-colorful-triangles_23-2147616335.jpg')";
}

function resetbg(){
  document.getElementById("cont").style.background = "";
}

.container {
  width: 200px;
  height: 200px;
}

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div class="container" id="cont">
  <div class="square" onmouseover="changebg()" onmouseout="resetbg()">
  </div>
</div>