Hi. I am trying to create 3 images with overlay effect on hover in a row above the header of my collection page through custom liquid. Being a person with no any knowledge in coding, I referred to the work of others and made some changes to the codes to make sure that the final work would suit my needs.
CSS
.container{> position: relative;> float: left;> display: flex;> width: 33.3333%;> padding-bottom: 30px;> }> > @media only screen and (max-width: 768px){> .container{> display: none;> }> }> > .content{> position: relative;> width: 100%;> max-width: 450px;> margin: auto;> overflow: hidden;> }> > .content .content-overlay {> background: 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 seem to work fine, except the overlay is not showing up on hover (or it doesn’t even exist) and the row is like merged with the header of my collection page as shown below
I’ve tried editing the codes for multiple times but they all don’t work. Would anybody please help me on this? Also, I would really appreciate it if you find any issues with the codes which might be creating other issues later.
Thank you.