Background of image overlay effect not showing up on hover

Technical Q&A
1

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


  

    

      

      
      
        ### This is a title
        

This is a short description

      

    

  

  
    

      

      
      
        ### This is a title
        

This is a short description

      

    

  

  
    

      

      
      
        ### This is a title
        

This is a short description

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.

2

Hi @hy3991 ,

It may be affected by the theme’s default code.

Please send your site and if your site is password protected, please send me the password. I will check it.