Background Of Image Overlay Effect Not Showing Up On Hover (on Shopify)

I am trying to create a row of images with overlay effect on hover through custom liquid section on my collection page. The CSS and HTML are as below:

CSS

.row {
  display: flex;
  padding-bottom: 30px;
}

@media only screen and (max-width: 768px){
  .row{
    display: none;
  }
}

.container{
  float: left;
  width: 50%;
}

.content{
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fcfcfc;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fcfcfc;
  font-size: 0.8em;
}

.fadeIn-top{
  top: 20%;
}

HTML

{% if collection.metafields.collections.bottom_image_1 and collection.metafields.collections.bottom_image_2 and collection.metafields.collections.bottom_image_3 %}

<body>
<div class="row">
  <div class="container">
    <div class="content">
      <div class="content-overlay"></div>
      <img class="content-image" src="{{collection.metafields.collections.bottom_image_1
.value | img_url: 'master'}}">
      <div class="content-details fadeIn-top">
        <h3 class="content-title">{{collection.metafields.collections.bottom_image_1_title.value}}</h3>
        <p class="content-text">{{collection.metafields.collections.bottom_image_1_content.value}}</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="content">
      <div class="content-overlay"></div>
      <img class="content-image" src="{{collection.metafields.collections.bottom_image_2
.value | img_url: 'master'}}">
      <div class="content-details fadeIn-top">
        <h3 class="content-title">{{collection.metafields.collections.bottom_image_2_title.value}}</h3>
        <p class="content-text">{{collection.metafields.collections.bottom_image_2_content.value}}</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="content">
      <div class="content-overlay"></div>
      <img class="content-image" src="{{collection.metafields.collections.bottom_image_3.value | img_url: 'master'}}">
      <div class="content-details fadeIn-top">
        <h3 class="content-title">{{collection.metafields.collections.bottom_image_3_title.value}}</h3>
        <p class="content-text">{{collection.metafields.collections.bottom_image_3_content.value}}</p>
      </div>
    </div>
  </div>
</div>
</body>

{% endif %}

The codes work perfectly fine on codepen, but when it is transferred to shopify, the background of the overlay effect is just not showing up. Can anybody please help me on this?

Thank you.