scruff Posted December 5, 2017 Share Posted December 5, 2017 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2017 Share Posted December 5, 2017 I don't see any problems, everything works fine? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now