Jump to content
scruff

Trouble with Custom CSS and Code Snippet

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×