Trouble with Custom CSS and Code Snippet

I’m having trouble adding custom css for an element I’ll use on the products page. The custom Css is as below:

.specs_container {
  position: absolute;
  width: 100%;
}

.specs_image {
  display: block;
  width: 100%;
  height: auto;
}

.specs_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f2ba02;
}

.specs_container:hover .specs_overlay {
  opacity: 1;
}

.specs_text {
  color: white;
  font-size: 20px;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.specs_centered {
	color: white;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

I add this to Custom CSS on theme options.

Then on products page I add a code snippet.
Insert this code there:

<div class="specs_container">
  <img src="xyz.png" alt="xyz" class="specs_image">
  <div class="specs_centered">CENTERED</div>
  <div class="specs_overlay">
  	<div class="specs_centered">CENTERED</div>
    <div class="specs_text">Hello World</div>
  </div>
</div>

And call the extra classes below as: specs_container specs_image specs_centered specs_overlay specs_centered specs_text

But when I run it, none of them shows on the page.
Note that I’ll have 3 columns of these snippets next to each other. So there might be something wrong with the coding perhaps. But I place 3 code snippets with 1/3 width to the page builder and then fill them in with the code.

Basically, the goal is to have 3 different images next to each other, with each of them having a title over the image. When hovered, it should fade into a solid color, the title should stay where it is, and more text should appear below the title

The page I need help with: [log in to see the link]