Web Hosting
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Trouble with Custom CSS and Code Snippet

Discussion in 'Misc WordPress Requests' started by scruff19, Nov 29, 2017.

  1. scruff19

    Guest

    Trouble with Custom CSS and Code Snippet, by scruff19

    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.

    Trouble with Custom CSS and Code Snippet
     
    #1

Share This Page

Web Hosting