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.
This is the page the code is live: https://www.arielrider.com/product/demo-copy/
Can anyone help me with this?